@serhii.olishevskyi/docs 1.2.24 → 1.2.26

package/dist/index.js

@@ -2968,13 +2968,16 @@ __export(index_exports, {
   NumberInputComponent: () => NumberInputComponent,
   PageComponent: () => PageComponent,
   PageLinkComponent: () => PageLinkComponent,
+  ProtectedLanguageSelector: () => LanguageSelector,
   Providers: () => Providers,
+  PublicLanguageSelector: () => PublicLanguageSelector,
   RefreshButtonComponent: () => RefreshButtonComponent,
   SearchComponent: () => SearchComponent,
   SelectComponent: () => SelectComponent,
   Services: () => Services,
   SupabaseProvider: () => SupabaseProvider,
   SwitchComponent: () => SwitchComponent,
+  TablePaginationComponent: () => TablePaginationComponent,
   TextFieldComponent: () => TextFieldComponent,
   ThemeProvider: () => ThemeProvider,
   ToastProvider: () => ToastProvider,
@@ -2982,6 +2985,7 @@ __export(index_exports, {
   TranslateProvider: () => TranslateProvider,
   TranslateText: () => TranslateText,
   TranslationEditProvider: () => TranslationEditProvider,
+  TruncatedTypography: () => TruncatedTypography,
   UrlComponent: () => UrlComponent,
   UserAvatarComponent: () => UserAvatarComponent,
   UserPopoverComponent: () => UserPopoverComponent,
@@ -4681,15 +4685,79 @@ var ErrorAlertComponent = ({
   );
 };
 
-// src/UI/components/layout/PageComponent.tsx
-var import_react29 = __toESM(require("react"));
+// src/UI/components/data.display/TruncatedTypography.tsx
+var import_react29 = require("react");
 var import_material25 = require("@mui/material");
+init_TranslatableTooltipComponent();
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var TruncatedTypography = ({
+  children,
+  lines = 1,
+  tooltipProps,
+  alwaysShowTooltip = false,
+  sx,
+  ...typographyProps
+}) => {
+  const textRef = (0, import_react29.useRef)(null);
+  const [isTruncated, setIsTruncated] = (0, import_react29.useState)(false);
+  const checkOverflow = () => {
+    const element = textRef.current;
+    if (!element) return;
+    if (lines === 1) {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    } else {
+      setIsTruncated(element.scrollHeight > element.clientHeight);
+    }
+  };
+  (0, import_react29.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime35.jsx)(
+    TranslatableTooltipComponent,
+    {
+      title: alwaysShowTooltip || isTruncated ? textContent || children : "",
+      disableHoverListener: !alwaysShowTooltip && !isTruncated,
+      ...tooltipProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        import_material25.Typography,
+        {
+          ref: textRef,
+          sx: {
+            ...truncationStyles,
+            ...sx
+          },
+          ...typographyProps,
+          children
+        }
+      )
+    }
+  );
+};
+
+// src/UI/components/layout/PageComponent.tsx
+var import_react30 = __toESM(require("react"));
+var import_material26 = require("@mui/material");
 var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
 var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
 var import_icons_material3 = require("@mui/icons-material");
 init_context();
 init_TranslatableTooltipComponent();
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var getTruncateStyles = (mode = "truncate") => {
   switch (mode) {
     case "truncate":
@@ -4717,10 +4785,10 @@ var PageHeader = ({
   forceMobileView,
   sx = []
 }) => {
-  const theme = (0, import_material25.useTheme)();
-  const mediaIsMobile = (0, import_material25.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
+  const theme = (0, import_material26.useTheme)();
+  const mediaIsMobile = (0, import_material26.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
   const isMobile = forceMobileView ?? mediaIsMobile;
-  const [anchorEl, setAnchorEl] = (0, import_react29.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react30.useState)(null);
   const isMenuOpen = Boolean(anchorEl);
   const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
   const handleCloseMenu = () => setAnchorEl(null);
@@ -4730,8 +4798,8 @@ var PageHeader = ({
   };
   const hasSecondaryActions = secondaryActions.length > 0;
   const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    import_material25.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    import_material26.Box,
     {
       sx: [
         {
@@ -4749,9 +4817,9 @@ var PageHeader = ({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            import_material25.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_material26.Box, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_material26.Box,
             {
               sx: {
                 display: "flex",
@@ -4770,10 +4838,10 @@ var PageHeader = ({
               children: icon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { minWidth: 0, flex: 1 }, children: [
-            tag && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Tooltip, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-              import_material25.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_material26.Box, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Tooltip, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_material26.Typography,
               {
                 variant: "h5",
                 component: "h1",
@@ -4784,11 +4852,11 @@ var PageHeader = ({
                   lineHeight: 1.3,
                   ...getTruncateStyles(titleTruncateMode)
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: title })
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: title })
               }
             ) }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Tooltip, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-              import_material25.Typography,
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Tooltip, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_material26.Typography,
               {
                 variant: "body2",
                 sx: {
@@ -4798,24 +4866,24 @@ var PageHeader = ({
                   lineHeight: 1.4,
                   ...getTruncateStyles(subtitleTruncateMode)
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: subtitle })
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: subtitle })
               }
             ) })
           ] })
         ] }),
-        hasActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+        hasActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
           /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-              import_material25.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_material26.IconButton,
               {
                 onClick: handleOpenMenu,
                 sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_MoreVert.default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_MoreVert.default, {})
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-              import_material25.Menu,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              import_material26.Menu,
               {
                 anchorEl,
                 open: isMenuOpen,
@@ -4824,9 +4892,9 @@ var PageHeader = ({
                 anchorOrigin: { horizontal: "right", vertical: "bottom" },
                 slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
                 children: [
-                  primaryAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                      import_material25.MenuItem,
+                  primaryAction && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                      import_material26.MenuItem,
                       {
                         onClick: () => handleMenuAction(primaryAction.onClick),
                         disabled: primaryAction.disabled,
@@ -4839,32 +4907,32 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          primaryAction.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          primaryAction.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     ),
-                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.75 } })
+                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Divider, { sx: { my: 0.75 } })
                   ] }),
-                  secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react29.default.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                      import_material25.MenuItem,
+                  secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react30.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                      import_material26.MenuItem,
                       {
                         onClick: () => handleMenuAction(action.onClick),
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
                   ] }, action.id)),
-                  refreshAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                      import_material25.MenuItem,
+                  refreshAction && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                      import_material26.MenuItem,
                       {
                         onClick: () => handleMenuAction(refreshAction.onClick),
                         disabled: refreshAction.disabled,
@@ -4876,8 +4944,8 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons_material3.Refresh, {}) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons_material3.Refresh, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     )
@@ -4888,10 +4956,10 @@ var PageHeader = ({
           ] })
         ) : (
           /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            (primaryAction || refreshAction) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Stack, { direction: "row", spacing: 2, children: [
-              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                import_material25.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_material26.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_material26.Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_material26.Button,
                 {
                   variant: primaryAction.variant || "contained",
                   color: primaryAction.color || "primary",
@@ -4899,32 +4967,32 @@ var PageHeader = ({
                   disabled: primaryAction.disabled,
                   startIcon: primaryAction.icon,
                   sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: primaryAction.label })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: primaryAction.label })
                 }
               ),
-              refreshAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                import_material25.Fab,
+              refreshAction && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_material26.Fab,
                 {
                   color: "default",
                   onClick: refreshAction.onClick,
                   disabled: refreshAction.disabled,
                   "aria-label": "refresh",
                   size: "small",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons_material3.Refresh, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons_material3.Refresh, {})
                 }
               ) })
             ] }),
-            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                import_material25.IconButton,
+            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_material26.IconButton,
                 {
                   onClick: handleOpenMenu,
                   sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_KeyboardArrowDown.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_KeyboardArrowDown.default, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                import_material25.Menu,
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_material26.Menu,
                 {
                   anchorEl,
                   open: isMenuOpen,
@@ -4932,17 +5000,17 @@ 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__ */ (0, import_jsx_runtime35.jsxs)(import_react29.default.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                      import_material25.MenuItem,
+                  children: secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react30.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                      import_material26.MenuItem,
                       {
                         onClick: () => handleMenuAction(action.onClick),
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
@@ -4952,14 +5020,14 @@ var PageHeader = ({
             ] })
           ] })
         ) }),
-        customFragment && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: customFragment })
+        customFragment && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: customFragment })
       ]
     }
   );
 };
 var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_material25.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_material26.Box,
     {
       sx: {
         width: "100%",
@@ -4975,8 +5043,8 @@ var PageComponent = ({
   header,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_material25.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_material26.Box,
     {
       sx: {
         //pt: 2,
@@ -4985,8 +5053,8 @@ var PageComponent = ({
         overflowY: "auto",
         boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(PageContainer, { children: [
-        header && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PageHeader, { ...header }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(PageContainer, { children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PageHeader, { ...header }),
         children
       ] })
     }
@@ -4994,9 +5062,9 @@ var PageComponent = ({
 };
 
 // src/UI/components/layout/FilterContainerComponent.tsx
-var import_react30 = __toESM(require("react"));
-var import_material26 = require("@mui/material");
-var import_jsx_runtime36 = (
+var import_react31 = __toESM(require("react"));
+var import_material27 = require("@mui/material");
+var import_jsx_runtime37 = (
   /* Автоматическая обертка каждого дочернего элемента в Grid size */
   require("react/jsx-runtime")
 );
@@ -5005,26 +5073,26 @@ var FilterContainerComponent = ({
   children,
   sx
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_material26.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_material27.Paper,
     {
       variant: "outlined",
       sx: [
         { p: 2, mb: 3 },
         ...Array.isArray(sx) ? sx : [sx]
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react30.default.Fragment, { children: sec }, idx)) : children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react31.default.Fragment, { children: sec }, idx)) : children })
     }
   );
 };
 
 // src/UI/components/layout/PageLinkComponent.tsx
 var import_icons_material4 = require("@mui/icons-material");
-var import_material27 = require("@mui/material");
-var import_react31 = __toESM(require("react"));
+var import_material28 = require("@mui/material");
+var import_react32 = __toESM(require("react"));
 var import_react_router_dom = require("react-router-dom");
 init_context();
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var PageLinkComponent = ({
   overrideNamespace,
   title,
@@ -5037,8 +5105,8 @@ var PageLinkComponent = ({
   bgcolor
 }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-    import_material27.Card,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    import_material28.Card,
     {
       sx: (theme) => ({
         height: "100%",
@@ -5051,21 +5119,21 @@ var PageLinkComponent = ({
         ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          import_material27.CardHeader,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_material28.CardHeader,
           {
-            avatar: icon ? import_react31.default.cloneElement(icon, {
+            avatar: icon ? import_react32.default.cloneElement(icon, {
               sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_material4.Settings, { color: bgcolor ? "inherit" : "primary" }),
-            title: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: title }) : title }),
-            subheader: subheader && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: subheader }) : subheader })
+            }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material4.Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Typography, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Typography, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: subheader }) : subheader })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_material27.CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: description }) : description }),
-          links && links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-            import_material27.ListItem,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.CardContent, { sx: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Typography, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+            import_material28.ListItem,
             {
               disablePadding: true,
               sx: {
@@ -5076,18 +5144,18 @@ var PageLinkComponent = ({
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  import_material27.ListItemIcon,
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  import_material28.ListItemIcon,
                   {
                     sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
                     onClick: () => {
                       if (link?.href) navigate(link.href);
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_material4.ArrowRight, { fontSize: "small", color: "inherit" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material4.ArrowRight, { fontSize: "small", color: "inherit" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemText, { children: link.onClick ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  import_material27.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { children: link.onClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  import_material28.Button,
                   {
                     size: "small",
                     variant: "text",
@@ -5110,10 +5178,10 @@ var PageLinkComponent = ({
                         // Эффект подчеркивания, как у ссылки
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : link.href ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  import_material27.Link,
+                ) : link.href ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  import_material28.Link,
                   {
                     component: import_react_router_dom.Link,
                     to: link.href,
@@ -5130,15 +5198,15 @@ var PageLinkComponent = ({
                         backgroundColor: "transparent"
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Typography, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
               ]
             },
             index
           )) })
         ] }),
-        actionButtonText && onActionButtonClick && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Button, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Button, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
       ]
     }
   );
@@ -5146,13 +5214,13 @@ var PageLinkComponent = ({
 
 // src/UI/components/layout/CollapsedContainerComponent.tsx
 var import_icons_material5 = require("@mui/icons-material");
-var import_material28 = require("@mui/material");
-var import_react32 = require("react");
+var import_material29 = require("@mui/material");
+var import_react33 = require("react");
 init_context();
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var ExpandMore = (0, import_material28.styled)((props) => {
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ExpandMore = (0, import_material29.styled)((props) => {
   const { expand, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material5.ExpandMore, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_material5.ExpandMore, {}) });
 })(({ theme, expand }) => ({
   transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
   transition: theme.transitions.create("transform", {
@@ -5167,14 +5235,14 @@ var ExpandMore = (0, import_material28.styled)((props) => {
 }));
 var CollapsedContainerComponent = (props) => {
   const { displayState } = useAppTheme();
-  const [expanded, setExpanded] = (0, import_react32.useState)(props.expanded === void 0 ? false : props.expanded);
+  const [expanded, setExpanded] = (0, import_react33.useState)(props.expanded === void 0 ? false : props.expanded);
   const handleExpandClick = () => {
     setExpanded(!expanded);
     props.onExpanded && props.onExpanded(!expanded);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Card, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-      import_material28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_material29.Card, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      import_material29.Box,
       {
         onClick: () => handleExpandClick(),
         sx: {
@@ -5185,16 +5253,16 @@ var CollapsedContainerComponent = (props) => {
           pr: 2
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_material28.CardHeader,
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            import_material29.CardHeader,
             {
               sx: { flexGrow: 1 },
-              avatar: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              title: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
-              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Tooltip, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Box, { sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Tooltip, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Box, { sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             ExpandMore,
             {
               expand: expanded,
@@ -5205,13 +5273,363 @@ var CollapsedContainerComponent = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Collapse, { in: expanded, timeout: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { variant: "middle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.CardContent, { children: props.children })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_material29.Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Divider, { variant: "middle" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.CardContent, { children: props.children })
     ] })
   ] });
 };
 
+// src/i18n/LanguageSelector.tsx
+var import_react34 = require("react");
+var import_react_i18next6 = require("react-i18next");
+var import_material30 = require("@mui/material");
+init_LocalizationProvider();
+init_UserSettingsProvider();
+init_SupabaseProvider();
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next6.useTranslation)();
+  const [languages, setLanguages] = (0, import_react34.useState)([]);
+  const [loading, setLoading] = (0, import_react34.useState)(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react34.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime40.jsx)(import_material30.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_material30.IconButton,
+      {
+        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__ */ (0, import_jsx_runtime40.jsx)(
+          import_material30.Box,
+          {
+            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__ */ (0, import_jsx_runtime40.jsx)(
+      import_material30.Menu,
+      {
+        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__ */ (0, import_jsx_runtime40.jsxs)(
+            import_material30.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  import_material30.Box,
+                  {
+                    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__ */ (0, import_jsx_runtime40.jsx)(import_material30.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next6.useTranslation)();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = (0, import_react34.useState)([]);
+  const [loading, setLoading] = (0, import_react34.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react34.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime40.jsx)(import_material30.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_material30.IconButton,
+      {
+        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__ */ (0, import_jsx_runtime40.jsx)(
+          import_material30.Box,
+          {
+            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__ */ (0, import_jsx_runtime40.jsx)(
+      import_material30.Menu,
+      {
+        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__ */ (0, import_jsx_runtime40.jsxs)(
+            import_material30.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  import_material30.Box,
+                  {
+                    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__ */ (0, import_jsx_runtime40.jsx)(import_material30.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// src/UI/components/tables/TablePaginationComponent.tsx
+var import_material31 = require("@mui/material");
+var import_FirstPage = __toESM(require("@mui/icons-material/FirstPage"));
+var import_KeyboardArrowLeft = __toESM(require("@mui/icons-material/KeyboardArrowLeft"));
+var import_KeyboardArrowRight = __toESM(require("@mui/icons-material/KeyboardArrowRight"));
+var import_LastPage = __toESM(require("@mui/icons-material/LastPage"));
+init_TranslatableTooltipComponent();
+init_context();
+var import_jsx_runtime41 = require("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__ */ (0, import_jsx_runtime41.jsxs)(import_material31.Box, { sx: { flexShrink: 0, ml: 2, display: "flex", alignItems: "center" }, children: [
+    showFirstButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslateText, { overrideNamespace: ns, children: "First page" }), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.IconButton, { onClick: handleFirstPage, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_FirstPage.default, {}) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslateText, { overrideNamespace: ns, children: "Previous page" }), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.IconButton, { onClick: handleBack, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_KeyboardArrowLeft.default, {}) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslateText, { overrideNamespace: ns, children: "Next page" }), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.IconButton, { onClick: handleNext, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_KeyboardArrowRight.default, {}) }) }) }),
+    showLastButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslateText, { overrideNamespace: ns, children: "Last page" }), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.IconButton, { onClick: handleLast, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_LastPage.default, {}) }) }) })
+  ] });
+};
+var TablePaginationComponent = ({
+  overrideNamespace,
+  rowsPerPageOptions = [5, 10, 25, 50],
+  count,
+  rowsPerPage,
+  page,
+  onPageChange,
+  onRowsPerPageChange
+}) => {
+  const { displayState } = useAppTheme();
+  const activeNamespace = overrideNamespace || "form_components";
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_material31.TablePagination,
+    {
+      rowsPerPageOptions,
+      component: "div",
+      count,
+      rowsPerPage,
+      page,
+      onPageChange,
+      onRowsPerPageChange,
+      showFirstButton: true,
+      showLastButton: true,
+      labelRowsPerPage: displayState.isMobile ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TranslateText, { overrideNamespace: activeNamespace, children: "Rows per page" }),
+        ":"
+      ] }),
+      ActionsComponent: CustomPaginationActions,
+      slotProps: {
+        actions: {
+          overrideNamespace: activeNamespace
+        }
+      }
+    }
+  );
+};
+
 // src/types/index.ts
 init_user_types();
 
@@ -5235,16 +5653,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 init_deviceId();
 init_context();
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = (0, import_react33.useState)("offline");
-  const [lastSeen, setLastSeen] = (0, import_react33.useState)(initialLastSeenAt ?? null);
-  const lastSeenRef = (0, import_react33.useRef)(initialLastSeenAt ?? null);
+  const [status, setStatus] = (0, import_react35.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react35.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react35.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -5260,7 +5678,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -5380,13 +5798,16 @@ var Utils = {
   NumberInputComponent,
   PageComponent,
   PageLinkComponent,
+  ProtectedLanguageSelector,
   Providers,
+  PublicLanguageSelector,
   RefreshButtonComponent,
   SearchComponent,
   SelectComponent,
   Services,
   SupabaseProvider,
   SwitchComponent,
+  TablePaginationComponent,
   TextFieldComponent,
   ThemeProvider,
   ToastProvider,
@@ -5394,6 +5815,7 @@ var Utils = {
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
+  TruncatedTypography,
   UrlComponent,
   UserAvatarComponent,
   UserPopoverComponent,