@serhii.olishevskyi/docs 1.2.26 → 1.2.28

package/dist/index.js

@@ -2403,16 +2403,16 @@ var init_context = __esm({
 });
 
 // src/UI/components/buttons/CopyClipboardButtonComponent.tsx
-var import_react23, import_material16, import_Check3, import_ContentCopy3, import_jsx_runtime26, CopyClipboardButtonComponent;
+var import_react24, import_material17, import_Check3, import_ContentCopy3, import_jsx_runtime27, CopyClipboardButtonComponent;
 var init_CopyClipboardButtonComponent = __esm({
   "src/UI/components/buttons/CopyClipboardButtonComponent.tsx"() {
     "use strict";
-    import_react23 = require("react");
-    import_material16 = require("@mui/material");
+    import_react24 = require("react");
+    import_material17 = require("@mui/material");
     import_Check3 = __toESM(require("@mui/icons-material/Check"));
     import_ContentCopy3 = __toESM(require("@mui/icons-material/ContentCopy"));
     init_TranslatableTooltipComponent();
-    import_jsx_runtime26 = require("react/jsx-runtime");
+    import_jsx_runtime27 = require("react/jsx-runtime");
     CopyClipboardButtonComponent = ({
       overrideNamespace,
       textToCopy,
@@ -2425,7 +2425,7 @@ var init_CopyClipboardButtonComponent = __esm({
       sx,
       ...iconButtonProps
     }) => {
-      const [copied, setCopied] = (0, import_react23.useState)(false);
+      const [copied, setCopied] = (0, import_react24.useState)(false);
       const handleCopy = async (e) => {
         e.stopPropagation();
         if (!textToCopy) return;
@@ -2442,15 +2442,15 @@ var init_CopyClipboardButtonComponent = __esm({
           console.error("Failed to copy text to clipboard:", error);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TranslatableTooltipComponent, { title: copied ? copiedTooltipText : copyTooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_material16.IconButton,
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatableTooltipComponent, { title: copied ? copiedTooltipText : copyTooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_material17.IconButton,
         {
           size,
           onClick: handleCopy,
           disabled: !textToCopy || iconButtonProps.disabled,
           sx: { p: 0.25, ...sx },
           ...iconButtonProps,
-          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Check3.default, { fontSize: size === "large" ? "medium" : "small", color: "success" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ContentCopy3.default, { fontSize: size === "large" ? "medium" : "small" })
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_Check3.default, { fontSize: size === "large" ? "medium" : "small", color: "success" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ContentCopy3.default, { fontSize: size === "large" ? "medium" : "small" })
         }
       ) }) });
     };
@@ -2458,33 +2458,33 @@ var init_CopyClipboardButtonComponent = __esm({
 });
 
 // src/UI/components/data.display/UserStatusChipComponent.tsx
-var import_material18, import_InfoOutlined, import_jsx_runtime28, UserStatusChipComponent;
+var import_material19, import_InfoOutlined, import_jsx_runtime29, UserStatusChipComponent;
 var init_UserStatusChipComponent = __esm({
   "src/UI/components/data.display/UserStatusChipComponent.tsx"() {
     "use strict";
-    import_material18 = require("@mui/material");
+    import_material19 = require("@mui/material");
     import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"));
     init_context();
-    import_jsx_runtime28 = require("react/jsx-runtime");
+    import_jsx_runtime29 = require("react/jsx-runtime");
     UserStatusChipComponent = ({ overrideNamespace, state }) => {
       const confirm = useConfirmation();
       const handleShowReason = async (e) => {
         e.stopPropagation();
         if (!state.locked_reason) return;
         await confirm({
-          title: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Lock Reason" }),
+          title: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Lock Reason" }),
           message: state.locked_reason,
           type: "info",
-          confirmText: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "OK" }),
+          confirmText: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "OK" }),
           showNoButton: false,
           showCancelButton: false
         });
       };
       if (state.profile_archived) {
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_material18.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material19.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Archived" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Archived" }),
             color: "default",
             size: "small",
             variant: "filled"
@@ -2492,10 +2492,10 @@ var init_UserStatusChipComponent = __esm({
         );
       }
       if (state.profile_locked) {
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_material18.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material19.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "System Locked" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "System Locked" }),
             color: "error",
             size: "small",
             variant: "filled"
@@ -2503,30 +2503,30 @@ var init_UserStatusChipComponent = __esm({
         );
       }
       if (state.excluded) {
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_material18.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material19.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Excluded" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Excluded" }),
             size: "small"
           }
         );
       }
       if (state.locked) {
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_material18.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material19.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Locked" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Locked" }),
             color: "error",
             size: "small",
             onDelete: state.locked_reason ? handleShowReason : void 0,
-            deleteIcon: state.locked_reason ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material18.IconButton, { size: "small", component: "span", sx: { p: 0.2 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_InfoOutlined.default, { fontSize: "small" }) }) : void 0
+            deleteIcon: state.locked_reason ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.IconButton, { size: "small", component: "span", sx: { p: 0.2 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_InfoOutlined.default, { fontSize: "small" }) }) : void 0
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_material18.Chip,
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_material19.Chip,
         {
-          label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Active" }),
+          label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Active" }),
           color: "success",
           size: "small",
           variant: "outlined"
@@ -2537,38 +2537,38 @@ var init_UserStatusChipComponent = __esm({
 });
 
 // src/UI/components/data.display/UserRoleChipComponent.tsx
-var import_material19, import_jsx_runtime29, UserRoleChipComponent;
+var import_material20, import_jsx_runtime30, UserRoleChipComponent;
 var init_UserRoleChipComponent = __esm({
   "src/UI/components/data.display/UserRoleChipComponent.tsx"() {
     "use strict";
-    import_material19 = require("@mui/material");
+    import_material20 = require("@mui/material");
     init_context();
-    import_jsx_runtime29 = require("react/jsx-runtime");
+    import_jsx_runtime30 = require("react/jsx-runtime");
     UserRoleChipComponent = ({ overrideNamespace, role }) => {
       switch (role) {
         case "superadmin":
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            import_material19.Chip,
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_material20.Chip,
             {
-              label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Superadministrator" }),
+              label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Superadministrator" }),
               color: "error",
               size: "small"
             }
           );
         case "admin":
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            import_material19.Chip,
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_material20.Chip,
             {
-              label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Administrator" }),
+              label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Administrator" }),
               color: "primary",
               size: "small"
             }
           );
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            import_material19.Chip,
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_material20.Chip,
             {
-              label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "User" }),
+              label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "User" }),
               variant: "outlined",
               size: "small"
             }
@@ -2584,13 +2584,13 @@ __export(UserPopoverComponent_exports, {
   UserPopoverComponent: () => UserPopoverComponent,
   default: () => UserPopoverComponent_default
 });
-var import_react25, import_material20, import_icons_material2, import_jsx_runtime30, useUserStatus, UserPopoverComponent, UserPopoverComponent_default;
+var import_react26, import_material21, import_icons_material3, import_jsx_runtime31, useUserStatus, UserPopoverComponent, UserPopoverComponent_default;
 var init_UserPopoverComponent = __esm({
   "src/UI/components/data.display/UserPopoverComponent.tsx"() {
     "use strict";
-    import_react25 = require("react");
-    import_material20 = require("@mui/material");
-    import_icons_material2 = require("@mui/icons-material");
+    import_react26 = require("react");
+    import_material21 = require("@mui/material");
+    import_icons_material3 = require("@mui/icons-material");
     init_UserStatusChipComponent();
     init_UserRoleChipComponent();
     init_CopyClipboardButtonComponent();
@@ -2599,11 +2599,11 @@ var init_UserPopoverComponent = __esm({
     init_UserSettingsProvider();
     init_TranslatableTooltipComponent();
     init_session_service();
-    import_jsx_runtime30 = require("react/jsx-runtime");
+    import_jsx_runtime31 = require("react/jsx-runtime");
     useUserStatus = (supabase, userId, open) => {
-      const [lastSeenAt, setLastSeenAt] = (0, import_react25.useState)(null);
-      const [loading, setLoading] = (0, import_react25.useState)(true);
-      (0, import_react25.useEffect)(() => {
+      const [lastSeenAt, setLastSeenAt] = (0, import_react26.useState)(null);
+      const [loading, setLoading] = (0, import_react26.useState)(true);
+      (0, import_react26.useEffect)(() => {
         if (!userId || !open) {
           setLastSeenAt(null);
           setLoading(false);
@@ -2652,13 +2652,13 @@ var init_UserPopoverComponent = __esm({
       const { activeCompanyId, membership: currentMembership } = useAuth();
       const { openChatWithUser } = useUserSettings();
       const { formatDate, formatRelativeTime } = useLocalization();
-      const [profileData, setProfileData] = (0, import_react25.useState)(null);
-      const [membershipData, setMembershipData] = (0, import_react25.useState)(null);
-      const [avatarUrl, setAvatarUrl] = (0, import_react25.useState)(null);
-      const [coverUrl, setCoverUrl] = (0, import_react25.useState)(null);
-      const [loading, setLoading] = (0, import_react25.useState)(true);
+      const [profileData, setProfileData] = (0, import_react26.useState)(null);
+      const [membershipData, setMembershipData] = (0, import_react26.useState)(null);
+      const [avatarUrl, setAvatarUrl] = (0, import_react26.useState)(null);
+      const [coverUrl, setCoverUrl] = (0, import_react26.useState)(null);
+      const [loading, setLoading] = (0, import_react26.useState)(true);
       const { lastSeenAt, isOnline } = useUserStatus(supabase, userId, open);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (!open || !userId || !activeCompanyId) return;
         let isMounted = true;
         setLoading(true);
@@ -2704,7 +2704,7 @@ var init_UserPopoverComponent = __esm({
       }, [open, userId, currentMembership?.id, activeCompanyId]);
       const getStatusChip = () => {
         if (!profileData) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UserStatusChipComponent, { state: { profile_archived: profileData.archived, profile_locked: profileData.locked, excluded: membershipData?.excluded || false, locked: membershipData?.locked || false, locked_reason: membershipData?.locked_reason || "" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UserStatusChipComponent, { state: { profile_archived: profileData.archived, profile_locked: profileData.locked, excluded: membershipData?.excluded || false, locked: membershipData?.locked || false, locked_reason: membershipData?.locked_reason || "" } });
       };
       const getStatusTypographyColor = (isOnline2, lastSeenAt2) => {
         if (isOnline2) return "success";
@@ -2725,8 +2725,8 @@ var init_UserPopoverComponent = __esm({
         return "inherit";
       };
       const canChat = currentMembership && membershipData && currentMembership.id !== membershipData.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_material20.Popover,
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_material21.Popover,
         {
           open,
           anchorEl,
@@ -2744,9 +2744,9 @@ var init_UserPopoverComponent = __esm({
               }
             }
           },
-          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.CircularProgress, { size: 28 }) }) : profileData ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-              import_material20.Box,
+          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.CircularProgress, { size: 28 }) }) : profileData ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              import_material21.Box,
               {
                 sx: {
                   position: "relative",
@@ -2755,8 +2755,8 @@ var init_UserPopoverComponent = __esm({
                   bgcolor: "action.selected"
                 },
                 children: [
-                  coverUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    import_material20.Box,
+                  coverUrl && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    import_material21.Box,
                     {
                       component: "img",
                       src: coverUrl,
@@ -2771,8 +2771,8 @@ var init_UserPopoverComponent = __esm({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    import_material20.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    import_material21.IconButton,
                     {
                       size: "small",
                       onClick: onClose,
@@ -2789,16 +2789,16 @@ var init_UserPopoverComponent = __esm({
                           transform: "scale(1.1)"
                         }
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Close, { fontSize: "small" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.Close, { fontSize: "small" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Box, { sx: { p: 2, pt: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-end", mt: "-18px", mb: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  import_material20.Badge,
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Box, { sx: { p: 2, pt: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-end", mt: "-18px", mb: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  import_material21.Badge,
                   {
                     overlap: "circular",
                     anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -2834,8 +2834,8 @@ var init_UserPopoverComponent = __esm({
                         }
                       }
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                      import_material20.Avatar,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      import_material21.Avatar,
                       {
                         src: avatarUrl || coverUrl || void 0,
                         sx: {
@@ -2853,54 +2853,54 @@ var init_UserPopoverComponent = __esm({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Box, { sx: { overflow: "hidden", pb: 0.5 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.2 }, noWrap: true, children: profileData.display_name || `${profileData.first_name || ""} ${profileData.last_name || ""}` }),
-                  membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: membershipData.employee_post })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Box, { sx: { overflow: "hidden", pb: 0.5 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.2 }, noWrap: true, children: profileData.display_name || `${profileData.first_name || ""} ${profileData.last_name || ""}` }),
+                  membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: membershipData.employee_post })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { my: 1, flexWrap: "wrap", gap: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { my: 1, flexWrap: "wrap", gap: 0.5 }, children: [
                 getStatusChip(),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UserRoleChipComponent, { role: membershipData?.role || "user" })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UserRoleChipComponent, { role: membershipData?.role || "user" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Divider, { sx: { my: 1.5 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { spacing: 1, sx: { fontSize: "0.875rem", mb: 1.5 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.AccessTime, { fontSize: "small", color: getStatusIconColor(isOnline, lastSeenAt) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: getStatusTypographyColor(isOnline, lastSeenAt), children: isOnline ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Online" }) : lastSeenAt ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Last seen" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Divider, { sx: { my: 1.5 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { spacing: 1, sx: { fontSize: "0.875rem", mb: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.AccessTime, { fontSize: "small", color: getStatusIconColor(isOnline, lastSeenAt) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", color: getStatusTypographyColor(isOnline, lastSeenAt), children: isOnline ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Online" }) : lastSeenAt ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Last seen" }),
                     ":",
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("strong", { children: formatRelativeTime(lastSeenAt) })
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Offline" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("strong", { children: formatRelativeTime(lastSeenAt) })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Offline" }) })
                 ] }),
-                profileData.email && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Email, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: profileData.email }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CopyClipboardButtonComponent, { textToCopy: profileData.email })
+                profileData.email && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.Email, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: profileData.email }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CopyClipboardButtonComponent, { textToCopy: profileData.email })
                 ] }),
-                membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Work, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: membershipData.employee_post }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CopyClipboardButtonComponent, { textToCopy: membershipData.employee_post })
+                membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.Work, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: membershipData.employee_post }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CopyClipboardButtonComponent, { textToCopy: membershipData.employee_post })
                 ] }),
-                profileData.phone && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Phone, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", children: profileData.phone })
+                profileData.phone && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.Phone, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", color: "text.primary", children: profileData.phone })
                 ] }),
-                profileData.birthday && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Cake, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", children: formatDate(profileData.birthday) })
+                profileData.birthday && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.Cake, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", color: "text.primary", children: formatDate(profileData.birthday) })
                 ] }),
-                membershipData?.created_at && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.CalendarToday, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Typography, { variant: "body2", color: "text.primary", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "In company from" }),
+                membershipData?.created_at && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.CalendarToday, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Typography, { variant: "body2", color: "text.primary", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "In company from" }),
                     ": ",
                     formatDate(membershipData.created_at)
                   ] })
                 ] }),
-                profileData.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  import_material20.Typography,
+                profileData.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  import_material21.Typography,
                   {
                     variant: "caption",
                     color: "text.secondary",
@@ -2915,28 +2915,28 @@ var init_UserPopoverComponent = __esm({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Divider, { sx: { my: 1 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-around", pt: 0.5 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Send a notification" }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.NotificationsNone, { fontSize: "small" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set a task" }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.AssignmentOutlined, { fontSize: "small" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Start a chat" }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  import_material20.IconButton,
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Divider, { sx: { my: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-around", pt: 0.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Send a notification" }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.NotificationsNone, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set a task" }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.AssignmentOutlined, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Start a chat" }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  import_material21.IconButton,
                   {
                     size: "small",
                     color: "primary",
                     disabled: !canChat,
                     onClick: () => membershipData && openChatWithUser(membershipData.id),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.ChatBubble, { fontSize: "small" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.ChatBubble, { fontSize: "small" })
                   }
                 ) })
               ] })
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_material20.Typography,
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            import_material21.Typography,
             {
               color: "error",
               variant: "body2",
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Failed to load user data" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Failed to load user data" })
             }
           ) })
         }
@@ -2958,6 +2958,7 @@ __export(index_exports, {
   CollapsedContainerComponent: () => CollapsedContainerComponent,
   ConfirmationProvider: () => ConfirmationProvider,
   CopyClipboardButtonComponent: () => CopyClipboardButtonComponent,
+  DateTimePickerComponent: () => DateTimePickerComponent,
   EmailInputComponent: () => EmailInputComponent,
   ErrorAlertComponent: () => ErrorAlertComponent,
   ExpandableNoteComponent: () => ExpandableNoteComponent,
@@ -2985,7 +2986,7 @@ __export(index_exports, {
   TranslateProvider: () => TranslateProvider,
   TranslateText: () => TranslateText,
   TranslationEditProvider: () => TranslationEditProvider,
-  TruncatedTypography: () => TruncatedTypography,
+  TruncatedTypographyComponent: () => TruncatedTypographyComponent,
   UrlComponent: () => UrlComponent,
   UserAvatarComponent: () => UserAvatarComponent,
   UserPopoverComponent: () => UserPopoverComponent,
@@ -4103,21 +4104,730 @@ function UrlComponent({
   ] });
 }
 
-// src/UI/components/buttons/ButtonComponent.tsx
+// src/UI/components/inputs/DateTimePickerComponent.tsx
 var import_react22 = require("react");
 var import_material15 = require("@mui/material");
+var import_icons_material2 = require("@mui/icons-material");
 init_context();
+init_TranslatableTooltipComponent();
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var ButtonComponent = (0, import_react22.forwardRef)(
+var LOCALE_CONFIGS = {
+  de: {
+    locale: "de-DE",
+    dateFormat: "DD.MM.YYYY",
+    timeFormat: "24",
+    placeholderDate: "TT.MM.JJJJ",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "TT.MM.JJJJ HH:MM",
+    weekStartsOn: 1
+  },
+  en: {
+    locale: "en-US",
+    dateFormat: "MM/DD/YYYY",
+    timeFormat: "12",
+    placeholderDate: "MM/DD/YYYY",
+    placeholderTime: "HH:MM AM/PM",
+    placeholderDateTime: "MM/DD/YYYY, HH:MM AM/PM",
+    weekStartsOn: 0
+  },
+  es: {
+    locale: "es-ES",
+    dateFormat: "DD/MM/YYYY",
+    timeFormat: "24",
+    placeholderDate: "DD/MM/AAAA",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "DD/MM/AAAA HH:MM",
+    weekStartsOn: 1
+  },
+  fr: {
+    locale: "fr-FR",
+    dateFormat: "DD/MM/YYYY",
+    timeFormat: "24",
+    placeholderDate: "JJ/MM/AAAA",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "JJ/MM/AAAA HH:MM",
+    weekStartsOn: 1
+  },
+  it: {
+    locale: "it-IT",
+    dateFormat: "DD/MM/YYYY",
+    timeFormat: "24",
+    placeholderDate: "GG/MM/AAAA",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "GG/MM/AAAA HH:MM",
+    weekStartsOn: 1
+  },
+  pl: {
+    locale: "pl-PL",
+    dateFormat: "DD.MM.YYYY",
+    timeFormat: "24",
+    placeholderDate: "DD.MM.RRRR",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "DD.MM.RRRR HH:MM",
+    weekStartsOn: 1
+  },
+  uk: {
+    locale: "uk-UA",
+    dateFormat: "DD.MM.YYYY",
+    timeFormat: "24",
+    placeholderDate: "\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420",
+    placeholderTime: "\u0413\u0413:\u0425\u0425",
+    placeholderDateTime: "\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425",
+    weekStartsOn: 1
+  }
+};
+function getLocaleConfig(langCode) {
+  const code = (langCode || "en").toLowerCase().substring(0, 2);
+  return LOCALE_CONFIGS[code] || LOCALE_CONFIGS.en;
+}
+function getMonthNames(langCode) {
+  const config = getLocaleConfig(langCode);
+  const formatter = new Intl.DateTimeFormat(config.locale, { month: "long" });
+  return Array.from({ length: 12 }, (_, i) => {
+    const d = new Date(2026, i, 15);
+    const name = formatter.format(d);
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  });
+}
+function getDayOfWeekShortNames(langCode) {
+  const config = getLocaleConfig(langCode);
+  const formatter = new Intl.DateTimeFormat(config.locale, { weekday: "short" });
+  const baseSunday = new Date(2026, 4, 10);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(baseSunday);
+    d.setDate(baseSunday.getDate() + i);
+    const dayStr = formatter.format(d);
+    days.push(dayStr.charAt(0).toUpperCase() + dayStr.slice(1, 3));
+  }
+  if (config.weekStartsOn === 1) {
+    const sunday = days.shift();
+    days.push(sunday);
+  }
+  return days;
+}
+function applyInputMask(val, langCode, mode) {
+  const config = getLocaleConfig(langCode);
+  const isSlash = config.dateFormat.includes("/");
+  const dateSep = isSlash ? "/" : ".";
+  const digits = val.replace(/\D/g, "");
+  if (mode === "date") {
+    const d = digits.slice(0, 8);
+    let res = "";
+    if (d.length > 0) res += d.slice(0, 2);
+    if (d.length >= 2) res += dateSep;
+    if (d.length > 2) res += d.slice(2, 4);
+    if (d.length >= 4) res += dateSep;
+    if (d.length > 4) res += d.slice(4, 8);
+    return res;
+  } else if (mode === "time") {
+    const t = digits.slice(0, 4);
+    let res = "";
+    if (t.length > 0) res += t.slice(0, 2);
+    if (t.length >= 2) res += ":";
+    if (t.length > 2) res += t.slice(2, 4);
+    return res;
+  } else {
+    const dt = digits.slice(0, 12);
+    let res = "";
+    if (dt.length > 0) res += dt.slice(0, 2);
+    if (dt.length >= 2) res += dateSep;
+    if (dt.length > 2) res += dt.slice(2, 4);
+    if (dt.length >= 4) res += dateSep;
+    if (dt.length > 4) res += dt.slice(4, 8);
+    if (dt.length > 8) res += " " + dt.slice(8, 10);
+    if (dt.length >= 10) res += ":";
+    if (dt.length > 10) res += dt.slice(10, 12);
+    return res;
+  }
+}
+function parseDateFromMask(maskedStr, langCode, mode) {
+  const config = getLocaleConfig(langCode);
+  const digits = maskedStr.replace(/\D/g, "");
+  if (mode === "date" && digits.length !== 8) return null;
+  if (mode === "time" && digits.length !== 4) return null;
+  if (mode === "datetime" && digits.length !== 12) return null;
+  try {
+    let day = 1, month = 0, year = 2026, hours = 0, minutes = 0;
+    if (mode === "date" || mode === "datetime") {
+      const isMMDD = config.dateFormat.startsWith("MM");
+      if (isMMDD) {
+        month = parseInt(digits.slice(0, 2), 10) - 1;
+        day = parseInt(digits.slice(2, 4), 10);
+      } else {
+        day = parseInt(digits.slice(0, 2), 10);
+        month = parseInt(digits.slice(2, 4), 10) - 1;
+      }
+      year = parseInt(digits.slice(4, 8), 10);
+      if (month < 0 || month > 11) return null;
+      if (day < 1 || day > 31) return null;
+      if (year < 1900 || year > 2100) return null;
+    }
+    if (mode === "time") {
+      hours = parseInt(digits.slice(0, 2), 10);
+      minutes = parseInt(digits.slice(2, 4), 10);
+      if (hours < 0 || hours > 23) return null;
+      if (minutes < 0 || minutes > 59) return null;
+    } else if (mode === "datetime") {
+      hours = parseInt(digits.slice(8, 10), 10);
+      minutes = parseInt(digits.slice(10, 12), 10);
+      if (hours < 0 || hours > 23) return null;
+      if (minutes < 0 || minutes > 59) return null;
+    }
+    const d = new Date(year, month, day, hours, minutes, 0);
+    if (isNaN(d.getTime())) return null;
+    if (mode !== "time" && (d.getDate() !== day || d.getMonth() !== month)) return null;
+    return d;
+  } catch {
+    return null;
+  }
+}
+function formatDateByLocale(date, langCode, mode) {
+  if (!date || isNaN(date.getTime())) return "";
+  const config = getLocaleConfig(langCode);
+  try {
+    if (mode === "date") {
+      return new Intl.DateTimeFormat(config.locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      }).format(date);
+    } else if (mode === "time") {
+      return new Intl.DateTimeFormat(config.locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: config.timeFormat === "12"
+      }).format(date);
+    } else {
+      return new Intl.DateTimeFormat(config.locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: config.timeFormat === "12"
+      }).format(date);
+    }
+  } catch (err) {
+    return date.toISOString();
+  }
+}
+var DateTimePickerComponent = ({
+  overrideNamespace,
+  value = null,
+  mode = "datetime",
+  onDateChange,
+  onChange,
+  disabled = false,
+  slotProps,
+  copyTooltip = "Copy",
+  copiedTooltip = "Copied!",
+  clearTooltip = "Clear",
+  lockTooltip = "Field is read-only",
+  showLock = false,
+  hideCopyButton = false,
+  hideClearButton = false,
+  error: customError,
+  helperText: customHelperText,
+  label,
+  ...props
+}) => {
+  const namespace = "form_components";
+  const { languages, currentLang } = useLocalization();
+  const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
+  const [selectedDate, setSelectedDate] = (0, import_react22.useState)(() => {
+    if (!value) return null;
+    const d = typeof value === "string" ? new Date(value) : value;
+    return isNaN(d.getTime()) ? null : d;
+  });
+  const activeLang = (0, import_react22.useMemo)(() => {
+    return languages.find((l) => l.code.toLowerCase() === currentLang.toLowerCase()) || languages[0];
+  }, [currentLang]);
+  const [inputValue, setInputValue] = (0, import_react22.useState)(() => {
+    return selectedDate ? formatDateByLocale(selectedDate, activeLang.code, mode) : "";
+  });
+  (0, import_react22.useEffect)(() => {
+    if (value === null || value === "") {
+      setSelectedDate(null);
+      setInputValue("");
+    } else {
+      const parsed = typeof value === "string" ? new Date(value) : value;
+      if (!isNaN(parsed.getTime())) {
+        setSelectedDate(parsed);
+        if (!isFocused) {
+          setInputValue(formatDateByLocale(parsed, activeLang.code, mode));
+        }
+      }
+    }
+  }, [value, activeLang.code, mode, isFocused]);
+  const [anchorEl, setAnchorEl] = (0, import_react22.useState)(null);
+  const [copied, setCopied] = (0, import_react22.useState)(false);
+  const [inputError, setInputError] = (0, import_react22.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react22.useState)(() => selectedDate || /* @__PURE__ */ new Date());
+  const localeConfig = (0, import_react22.useMemo)(() => getLocaleConfig(activeLang.code), [activeLang]);
+  const placeholderText = (0, import_react22.useMemo)(() => {
+    if (mode === "date") return localeConfig.placeholderDate;
+    if (mode === "time") return localeConfig.placeholderTime;
+    return localeConfig.placeholderDateTime;
+  }, [mode, localeConfig]);
+  const isReadOnly = Boolean(slotProps?.htmlInput?.readOnly);
+  const isLocked = disabled || isReadOnly;
+  const notifyChanges = (newDate, updateText = true) => {
+    setSelectedDate(newDate);
+    const formatted = formatDateByLocale(newDate, activeLang.code, mode);
+    if (updateText) {
+      setInputValue(formatted);
+    }
+    setInputError(false);
+    const iso = newDate ? newDate.toISOString() : "";
+    if (onDateChange) {
+      onDateChange({
+        date: newDate,
+        formatted,
+        iso,
+        mode
+      });
+    }
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: iso },
+        currentTarget: { value: iso }
+      };
+      onChange(syntheticEvent);
+    }
+  };
+  const handleManualInput = (e) => {
+    const rawVal = e.target.value;
+    const masked = applyInputMask(rawVal, activeLang.code, mode);
+    setInputValue(masked);
+    if (onChange) {
+      onChange(e);
+    }
+    if (!masked.trim()) {
+      notifyChanges(null, false);
+      setInputError(false);
+      return;
+    }
+    const parsedDate = parseDateFromMask(masked, activeLang.code, mode);
+    if (parsedDate) {
+      setInputError(false);
+      notifyChanges(parsedDate, false);
+    } else {
+      const digits = masked.replace(/\D/g, "");
+      const expectedDigits = mode === "date" ? 8 : mode === "time" ? 4 : 12;
+      if (digits.length === expectedDigits) {
+        setInputError(true);
+      } else {
+        setInputError(false);
+      }
+      if (onDateChange) {
+        onDateChange({
+          date: null,
+          formatted: masked,
+          iso: "",
+          mode
+        });
+      }
+    }
+  };
+  const handleOpenPicker = (event) => {
+    if (isLocked) return;
+    setViewDate(selectedDate || /* @__PURE__ */ new Date());
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClosePicker = () => {
+    setAnchorEl(null);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    notifyChanges(null, true);
+  };
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    if (!inputValue || copied) return;
+    let success = false;
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(inputValue);
+        success = true;
+      } catch {
+      }
+    }
+    if (!success) {
+      try {
+        const textArea = document.createElement("textarea");
+        textArea.value = inputValue;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        success = document.execCommand("copy");
+        document.body.removeChild(textArea);
+      } catch (err) {
+        console.warn("Copy fallback error", err);
+      }
+    }
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const monthNames = (0, import_react22.useMemo)(() => getMonthNames(activeLang.code), [activeLang.code]);
+  const dayShortNames = (0, import_react22.useMemo)(() => getDayOfWeekShortNames(activeLang.code), [activeLang.code]);
+  const calendarGrid = (0, import_react22.useMemo)(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1);
+    const lastDayOfMonth = new Date(year, month + 1, 0);
+    let startDayOfWeek = firstDayOfMonth.getDay();
+    if (localeConfig.weekStartsOn === 1) {
+      startDayOfWeek = (startDayOfWeek + 6) % 7;
+    }
+    const daysInMonth = lastDayOfMonth.getDate();
+    const grid = [];
+    for (let i = 0; i < startDayOfWeek; i++) {
+      grid.push(null);
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      grid.push(new Date(year, month, d));
+    }
+    return grid;
+  }, [viewDate, localeConfig.weekStartsOn]);
+  const handleSelectDay = (day) => {
+    const base = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
+    base.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+    notifyChanges(base, true);
+    if (mode === "date") {
+      handleClosePicker();
+    }
+  };
+  const handleTimeChange = (hours, minutes) => {
+    const base = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
+    base.setHours(hours);
+    base.setMinutes(minutes);
+    base.setSeconds(0);
+    notifyChanges(base, true);
+  };
+  const isToday = (d) => {
+    if (!d) return false;
+    const now = /* @__PURE__ */ new Date();
+    return d.getDate() === now.getDate() && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();
+  };
+  const isSelected = (d) => {
+    if (!d || !selectedDate) return false;
+    return d.getDate() === selectedDate.getDate() && d.getMonth() === selectedDate.getMonth() && d.getFullYear() === selectedDate.getFullYear();
+  };
+  const getModeIcon = () => {
+    if (mode === "date") return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.CalendarMonth, { fontSize: "small", color: "action" });
+    if (mode === "time") return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.AccessTime, { fontSize: "small", color: "action" });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.Event, { fontSize: "small", color: "action" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_material15.TextField,
+      {
+        value: inputValue,
+        onChange: handleManualInput,
+        onFocus: (e) => {
+          setIsFocused(true);
+          if (props.onFocus) props.onFocus(e);
+        },
+        onBlur: (e) => {
+          setIsFocused(false);
+          if (selectedDate) {
+            setInputValue(formatDateByLocale(selectedDate, activeLang.code, mode));
+          }
+          if (props.onBlur) props.onBlur(e);
+        },
+        disabled,
+        placeholder: placeholderText,
+        label,
+        error: customError || inputError,
+        margin: "dense",
+        helperText: customHelperText || (inputError ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslateText, { overrideNamespace, children: "Invalid date or time format" }) : ""),
+        sx: {
+          "& .MuiInputLabel-asterisk": {
+            color: "red",
+            fontSize: "1.5rem"
+          },
+          "& .MuiInputBase-input": {
+            color: isReadOnly ? "text.disabled" : void 0,
+            fontWeight: 500,
+            letterSpacing: "0.02em"
+          }
+        },
+        ...props,
+        slotProps: {
+          ...slotProps,
+          input: {
+            ...slotProps?.input || {},
+            readOnly: isReadOnly,
+            /* END ADORNMENT: Action Icons (Clear, Animated Copy, Lock, Trigger) */
+            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
+              inputValue && !isLocked && !hideClearButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslatableTooltipComponent, { title: clearTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "small",
+                  onClick: handleClear,
+                  edge: "end",
+                  "aria-label": "clear date input",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.Clear, { fontSize: "small" })
+                }
+              ) }),
+              inputValue && !hideCopyButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslatableTooltipComponent, { title: copied ? copiedTooltip : copyTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "small",
+                  onClick: handleCopy,
+                  edge: "end",
+                  "aria-label": "copy date value",
+                  color: copied ? "success" : "default",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                    import_material15.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        position: "relative",
+                        width: 20,
+                        height: 20
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          import_icons_material2.ContentCopy,
+                          {
+                            fontSize: "small",
+                            sx: {
+                              position: "absolute",
+                              transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+                              opacity: copied ? 0 : 1,
+                              transform: copied ? "scale(0.5) rotate(-45deg)" : "scale(1) rotate(0deg)"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          import_icons_material2.Check,
+                          {
+                            fontSize: "small",
+                            color: "success",
+                            sx: {
+                              position: "absolute",
+                              transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+                              opacity: copied ? 1 : 0,
+                              transform: copied ? "scale(1) rotate(0deg)" : "scale(0.5) rotate(45deg)"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              !isLocked && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "small",
+                  onClick: handleOpenPicker,
+                  edge: "end",
+                  color: Boolean(anchorEl) ? "primary" : "default",
+                  children: getModeIcon()
+                }
+              ),
+              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslatableTooltipComponent, { title: lockTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.Lock, { fontSize: "small" })
+                }
+              ) }),
+              slotProps?.input?.endAdornment
+            ] })
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_material15.Popover,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: handleClosePicker,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            elevation: 6,
+            sx: {
+              p: 2,
+              width: 320,
+              //borderRadius: 3,
+              mt: 1,
+              border: "1px solid",
+              borderColor: "divider"
+            }
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { children: [
+          mode !== "time" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "small",
+                  onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.ChevronLeft, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Typography, { variant: "body2", sx: { fontWeight: 700 }, children: [
+                monthNames[viewDate.getMonth()],
+                " ",
+                viewDate.getFullYear()
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "small",
+                  onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.ChevronRight, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Grid, { container: true, columns: 7, sx: { mb: 0.5, textAlign: "center" }, children: dayShortNames.map((dayName, idx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Grid, { size: { xs: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_material15.Typography,
+              {
+                variant: "caption",
+                color: "secondary",
+                sx: { fontSize: "0.7rem", fontWeight: 700 },
+                children: dayName
+              }
+            ) }, idx)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Grid, { container: true, columns: 7, spacing: 0.5, sx: { textAlign: "center", mb: 2 }, children: calendarGrid.map((day, idx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Grid, { size: { xs: 1 }, children: day ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_material15.Button,
+              {
+                size: "small",
+                onClick: () => handleSelectDay(day),
+                sx: {
+                  minWidth: 0,
+                  width: "100%",
+                  height: 32,
+                  p: 0,
+                  borderRadius: "50%",
+                  fontSize: "0.8rem",
+                  fontWeight: isSelected(day) || isToday(day) ? 700 : 400,
+                  bgcolor: isSelected(day) ? "primary.main" : isToday(day) ? "action.hover" : "transparent",
+                  color: isSelected(day) ? "primary.contrastText" : isToday(day) ? "primary.main" : "text.primary",
+                  border: isToday(day) && !isSelected(day) ? "1px solid" : "none",
+                  borderColor: "primary.main",
+                  "&:hover": {
+                    bgcolor: isSelected(day) ? "primary.dark" : "action.selected"
+                  }
+                },
+                children: day.getDate()
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Box, { sx: { height: 32 } }) }, idx)) })
+          ] }),
+          mode !== "date" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { sx: { pt: mode === "datetime" ? 1.5 : 0, borderTop: mode === "datetime" ? "1px solid" : "none", borderColor: "divider" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Typography, { variant: "caption", color: "secondary", sx: { fontWeight: 700, display: "block", mb: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslateText, { overrideNamespace, children: `Time Selection (${localeConfig.timeFormat === "12" ? "12-hour AM/PM" : "24-hour format"})` }),
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, my: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.Select,
+                {
+                  size: "small",
+                  value: (selectedDate || /* @__PURE__ */ new Date()).getHours(),
+                  onChange: (e) => handleTimeChange(Number(e.target.value), (selectedDate || /* @__PURE__ */ new Date()).getMinutes()),
+                  sx: { minWidth: 70 },
+                  children: Array.from({ length: 24 }, (_, i) => {
+                    let labelStr = i.toString().padStart(2, "0");
+                    if (localeConfig.timeFormat === "12") {
+                      const period = i >= 12 ? "PM" : "AM";
+                      const h12 = i % 12 || 12;
+                      labelStr = `${h12} ${period}`;
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.MenuItem, { value: i, children: labelStr }, i);
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Typography, { variant: "h6", sx: { fontWeight: 700 }, children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_material15.Select,
+                {
+                  size: "small",
+                  value: Math.floor((selectedDate || /* @__PURE__ */ new Date()).getMinutes() / 5) * 5,
+                  onChange: (e) => handleTimeChange((selectedDate || /* @__PURE__ */ new Date()).getHours(), Number(e.target.value)),
+                  sx: { minWidth: 70 },
+                  children: Array.from({ length: 12 }, (_, i) => i * 5).map((m) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.MenuItem, { value: m, children: m.toString().padStart(2, "0") }, m))
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Divider, { sx: { my: 1.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material15.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_material15.Button,
+              {
+                size: "small",
+                variant: "outlined",
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_material2.Today, { fontSize: "inherit" }),
+                onClick: () => {
+                  const now = /* @__PURE__ */ new Date();
+                  notifyChanges(now, true);
+                  if (mode === "date") handleClosePicker();
+                },
+                sx: { fontSize: "0.72rem", py: 0.3 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Now" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_material15.Button,
+              {
+                size: "small",
+                variant: "contained",
+                onClick: handleClosePicker,
+                sx: { fontSize: "0.72rem", py: 0.3 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" })
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/UI/components/buttons/ButtonComponent.tsx
+var import_react23 = require("react");
+var import_material16 = require("@mui/material");
+init_context();
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ButtonComponent = (0, import_react23.forwardRef)(
   ({ label, children, overrideNamespace, ...props }, ref) => {
     const renderContent = (content) => {
       if (typeof content === "string") {
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslateText, { overrideNamespace, children: content });
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TranslateText, { overrideNamespace, children: content });
       }
       return content;
     };
     const contentToRender = label !== void 0 ? label : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Button, { ref, ...props, children: renderContent(contentToRender) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Button, { ref, ...props, children: renderContent(contentToRender) });
   }
 );
 ButtonComponent.displayName = "ButtonComponent";
@@ -4126,13 +4836,13 @@ ButtonComponent.displayName = "ButtonComponent";
 init_CopyClipboardButtonComponent();
 
 // src/UI/components/buttons/RefreshButtonComponent.tsx
-var import_react24 = require("react");
-var import_material17 = require("@mui/material");
+var import_react25 = require("react");
+var import_material18 = require("@mui/material");
 var import_Refresh = __toESM(require("@mui/icons-material/Refresh"));
 init_context();
 init_TranslatableTooltipComponent();
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var AnimatedRefreshIcon = (0, import_material17.styled)(import_Refresh.default, {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var AnimatedRefreshIcon = (0, import_material18.styled)(import_Refresh.default, {
   shouldForwardProp: (prop) => prop !== "isSpinning"
 })(({ isSpinning }) => ({
   animation: isSpinning ? "spin 1s linear infinite" : "none",
@@ -4159,7 +4869,7 @@ var RefreshButtonComponent = ({
   hideTooltipOnDesktop
 }) => {
   const { displayState } = useAppTheme();
-  const [internalLoading, setInternalLoading] = (0, import_react24.useState)(false);
+  const [internalLoading, setInternalLoading] = (0, import_react25.useState)(false);
   const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
   const handleClick = async (event) => {
     if (!onClick || isLoading || disabled) return;
@@ -4170,10 +4880,10 @@ var RefreshButtonComponent = ({
       setInternalLoading(false);
     }
   };
-  const renderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  const renderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
   if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_material17.Fab,
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_material18.Fab,
       {
         size,
         color: "inherit",
@@ -4184,8 +4894,8 @@ var RefreshButtonComponent = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_material17.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_material18.Button,
     {
       variant: "contained",
       color: "inherit",
@@ -4194,7 +4904,7 @@ var RefreshButtonComponent = ({
       disabled: disabled || isLoading,
       fullWidth,
       startIcon: renderIcon(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
     }
   ) });
 };
@@ -4203,11 +4913,11 @@ var RefreshButtonComponent = ({
 init_TranslatableTooltipComponent();
 
 // src/UI/components/data.display/UserAvatarComponent.tsx
-var import_react26 = require("react");
-var import_material21 = require("@mui/material");
+var import_react27 = require("react");
+var import_material22 = require("@mui/material");
 init_context();
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var LazyUserPopover = (0, import_react26.lazy)(() => Promise.resolve().then(() => (init_UserPopoverComponent(), UserPopoverComponent_exports)));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var LazyUserPopover = (0, import_react27.lazy)(() => Promise.resolve().then(() => (init_UserPopoverComponent(), UserPopoverComponent_exports)));
 var getInitials = (name) => {
   if (!name) return "?";
   const parts = name.trim().split(" ");
@@ -4229,11 +4939,11 @@ var UserAvatarComponent = ({
   sx = {}
 }) => {
   const supabase = useSupabase();
-  const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
-  const [hasInteracted, setHasInteracted] = (0, import_react26.useState)(false);
-  const [resolvedAvatarUrl, setResolvedAvatarUrl] = (0, import_react26.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react27.useState)(null);
+  const [hasInteracted, setHasInteracted] = (0, import_react27.useState)(false);
+  const [resolvedAvatarUrl, setResolvedAvatarUrl] = (0, import_react27.useState)(null);
   const canShowPopover = !disablePopover && Boolean(userId);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     let isMounted = true;
     const resolveAvatar = async () => {
       if (!avatarUrl) {
@@ -4278,13 +4988,13 @@ var UserAvatarComponent = ({
   };
   const isPopoverOpen = Boolean(anchorEl);
   const initials = getInitials(displayName || "");
-  const getTooltip = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { component: "div", variant: "caption", children: displayName }),
-    displayName && employeePost && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { component: "div", variant: "caption", children: employeePost })
+  const getTooltip = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Typography, { component: "div", variant: "caption", children: displayName }),
+    displayName && employeePost && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Typography, { component: "div", variant: "caption", children: employeePost })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Tooltip, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_material21.Avatar,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Tooltip, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_material22.Avatar,
       {
         src: resolvedAvatarUrl || void 0,
         alt: displayName || "User Avatar",
@@ -4309,7 +5019,7 @@ var UserAvatarComponent = ({
         children: !resolvedAvatarUrl && initials
       }
     ) }),
-    canShowPopover && hasInteracted && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react26.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    canShowPopover && hasInteracted && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react27.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       LazyUserPopover,
       {
         userId,
@@ -4327,10 +5037,10 @@ init_UserRoleChipComponent();
 init_UserStatusChipComponent();
 
 // src/UI/components/data.display/MyAvatarComponent.tsx
-var import_react27 = require("react");
-var import_material22 = require("@mui/material");
+var import_react28 = require("react");
+var import_material23 = require("@mui/material");
 init_context();
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var getInitials2 = (name) => {
   if (!name) return "?";
   const parts = name.trim().split(" ");
@@ -4347,7 +5057,7 @@ var MyAvatarComponent = ({
   sx = {}
 }) => {
   const { profile: userProfile, loading: isLoading } = useAuth();
-  const [anchorEl, setAnchorEl] = (0, import_react27.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react28.useState)(null);
   const handlePopoverOpen = (event) => {
     if (!disablePopover) {
       setAnchorEl(event.currentTarget);
@@ -4358,8 +5068,8 @@ var MyAvatarComponent = ({
   };
   const isPopoverOpen = Boolean(anchorEl);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_material22.Skeleton,
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_material23.Skeleton,
       {
         variant: "circular",
         width: size,
@@ -4369,9 +5079,9 @@ var MyAvatarComponent = ({
     );
   }
   const initials = getInitials2(userProfile?.display_name || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_material22.Avatar,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_material23.Avatar,
       {
         src: userProfile?.avatar_url || void 0,
         alt: userProfile?.display_name || "User Avatar",
@@ -4397,8 +5107,8 @@ var MyAvatarComponent = ({
         children: !userProfile?.avatar_url && initials
       }
     ),
-    !disablePopover && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_material22.Popover,
+    !disablePopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_material23.Popover,
       {
         id: `avatar-popover-${userProfile?.id}`,
         open: isPopoverOpen,
@@ -4428,9 +5138,9 @@ var MyAvatarComponent = ({
             }
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_material22.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
-          userProfile?.email && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Typography, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_material23.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material23.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material23.Typography, { variant: "caption", color: "text.secondary", children: userProfile.email })
         ] })
       }
     )
@@ -4438,10 +5148,10 @@ var MyAvatarComponent = ({
 };
 
 // src/UI/components/data.display/ExpandableNoteComponent.tsx
-var import_react28 = require("react");
-var import_material23 = require("@mui/material");
+var import_react29 = require("react");
+var import_material24 = require("@mui/material");
 init_context();
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ExpandableNoteComponent = ({
   overrideNamespace,
   text,
@@ -4450,7 +5160,7 @@ var ExpandableNoteComponent = ({
   sx,
   ...restProps
 }) => {
-  const [isExpanded, setIsExpanded] = (0, import_react28.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react29.useState)(false);
   if (!text) return null;
   const isLong = text.length > maxLength;
   const displayedText = isExpanded || !isLong ? text : `${text.slice(0, maxLength).trim()}...`;
@@ -4458,8 +5168,8 @@ var ExpandableNoteComponent = ({
     e.stopPropagation();
     setIsExpanded((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_material23.Typography,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    import_material24.Typography,
     {
       variant: "caption",
       sx: {
@@ -4470,15 +5180,15 @@ var ExpandableNoteComponent = ({
       },
       ...restProps,
       children: [
-        label !== void 0 ? label : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
+        label !== void 0 ? label : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
           ": "
         ] }),
         " ",
         displayedText,
         " ",
-        isLong && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          import_material23.Link,
+        isLong && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_material24.Link,
           {
             component: "button",
             type: "button",
@@ -4492,8 +5202,8 @@ var ExpandableNoteComponent = ({
               cursor: "pointer",
               verticalAlign: "baseline"
             },
-            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
+            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
               "..."
             ] })
           }
@@ -4504,16 +5214,16 @@ var ExpandableNoteComponent = ({
 };
 
 // src/UI/components/data.display/ErrorAlertComponent.tsx
-var import_material24 = require("@mui/material");
+var import_material25 = require("@mui/material");
 var import_Replay = __toESM(require("@mui/icons-material/Replay"));
 init_context();
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var ErrorIllustration = ({ size = 64 }) => {
-  const theme = (0, import_material24.useTheme)();
+  const theme = (0, import_material25.useTheme)();
   const mainColor = theme.palette.error.main;
   const lightColor = theme.palette.error.light;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_material24.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_material25.Box,
     {
       sx: {
         display: "flex",
@@ -4521,7 +5231,7 @@ var ErrorIllustration = ({ size = 64 }) => {
         justifyContent: "center",
         flexShrink: 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "svg",
         {
           width: size,
@@ -4530,7 +5240,7 @@ var ErrorIllustration = ({ size = 64 }) => {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "circle",
               {
                 cx: "50",
@@ -4539,7 +5249,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 fill: lightColor,
                 fillOpacity: "0.25",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     "animate",
                     {
                       attributeName: "r",
@@ -4548,7 +5258,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     "animate",
                     {
                       attributeName: "fill-opacity",
@@ -4560,8 +5270,8 @@ var ErrorIllustration = ({ size = 64 }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "path",
               {
                 d: "M50 20L80 72H20L50 20Z",
@@ -4571,7 +5281,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "path",
               {
                 d: "M50 36V54",
@@ -4580,10 +5290,10 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinecap: "round"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
           ]
         }
       )
@@ -4598,8 +5308,8 @@ var ErrorAlertComponent = ({
   retryText = "Retry",
   isRetrying = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_material24.Alert,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_material25.Alert,
     {
       severity: "error",
       icon: false,
@@ -4616,8 +5326,8 @@ var ErrorAlertComponent = ({
           p: 0
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-        import_material24.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        import_material25.Box,
         {
           sx: {
             display: "flex",
@@ -4626,34 +5336,34 @@ var ErrorAlertComponent = ({
             gap: 2
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorIllustration, { size: 68 }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_material24.Box, { sx: { flexGrow: 1 }, children: [
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                import_material24.Typography,
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                import_material25.Typography,
                 {
                   variant: "subtitle1",
                   sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace, children: title })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace, children: title })
                 }
               ) : title,
-              typeof message === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Typography, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace, children: message }) }) : message
+              typeof message === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Typography, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace, children: message }) }) : message
             ] }),
-            onRetry && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              import_material24.Box,
+            onRetry && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              import_material25.Box,
               {
                 sx: {
                   alignSelf: { xs: "flex-end", sm: "center" },
                   mt: { xs: 1, sm: 0 }
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                  import_material24.Button,
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  import_material25.Button,
                   {
                     variant: "outlined",
                     color: "error",
                     size: "small",
                     disabled: isRetrying,
                     onClick: onRetry,
-                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       import_Replay.default,
                       {
                         sx: {
@@ -4685,12 +5395,12 @@ var ErrorAlertComponent = ({
   );
 };
 
-// src/UI/components/data.display/TruncatedTypography.tsx
-var import_react29 = require("react");
-var import_material25 = require("@mui/material");
+// src/UI/components/data.display/TruncatedTypographyComponent.tsx
+var import_react30 = require("react");
+var import_material26 = require("@mui/material");
 init_TranslatableTooltipComponent();
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var TruncatedTypography = ({
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var TruncatedTypographyComponent = ({
   children,
   lines = 1,
   tooltipProps,
@@ -4698,8 +5408,8 @@ var TruncatedTypography = ({
   sx,
   ...typographyProps
 }) => {
-  const textRef = (0, import_react29.useRef)(null);
-  const [isTruncated, setIsTruncated] = (0, import_react29.useState)(false);
+  const textRef = (0, import_react30.useRef)(null);
+  const [isTruncated, setIsTruncated] = (0, import_react30.useState)(false);
   const checkOverflow = () => {
     const element = textRef.current;
     if (!element) return;
@@ -4709,7 +5419,7 @@ var TruncatedTypography = ({
       setIsTruncated(element.scrollHeight > element.clientHeight);
     }
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     checkOverflow();
     window.addEventListener("resize", checkOverflow);
     return () => window.removeEventListener("resize", checkOverflow);
@@ -4727,14 +5437,14 @@ var TruncatedTypography = ({
     whiteSpace: "nowrap"
   };
   const textContent = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     TranslatableTooltipComponent,
     {
       title: alwaysShowTooltip || isTruncated ? textContent || children : "",
       disableHoverListener: !alwaysShowTooltip && !isTruncated,
       ...tooltipProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        import_material25.Typography,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        import_material26.Typography,
         {
           ref: textRef,
           sx: {
@@ -4750,14 +5460,14 @@ var TruncatedTypography = ({
 };
 
 // src/UI/components/layout/PageComponent.tsx
-var import_react30 = __toESM(require("react"));
-var import_material26 = require("@mui/material");
+var import_react31 = __toESM(require("react"));
+var import_material27 = 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");
+var import_icons_material4 = require("@mui/icons-material");
 init_context();
 init_TranslatableTooltipComponent();
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var getTruncateStyles = (mode = "truncate") => {
   switch (mode) {
     case "truncate":
@@ -4785,10 +5495,10 @@ var PageHeader = ({
   forceMobileView,
   sx = []
 }) => {
-  const theme = (0, import_material26.useTheme)();
-  const mediaIsMobile = (0, import_material26.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
+  const theme = (0, import_material27.useTheme)();
+  const mediaIsMobile = (0, import_material27.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
   const isMobile = forceMobileView ?? mediaIsMobile;
-  const [anchorEl, setAnchorEl] = (0, import_react30.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react31.useState)(null);
   const isMenuOpen = Boolean(anchorEl);
   const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
   const handleCloseMenu = () => setAnchorEl(null);
@@ -4798,8 +5508,8 @@ var PageHeader = ({
   };
   const hasSecondaryActions = secondaryActions.length > 0;
   const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-    import_material26.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_material27.Box,
     {
       sx: [
         {
@@ -4817,9 +5527,9 @@ var PageHeader = ({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__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,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_material27.Box, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_material27.Box,
             {
               sx: {
                 display: "flex",
@@ -4838,10 +5548,10 @@ var PageHeader = ({
               children: icon
             }
           ),
-          /* @__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,
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_material27.Box, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Tooltip, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_material27.Typography,
               {
                 variant: "h5",
                 component: "h1",
@@ -4852,11 +5562,11 @@ var PageHeader = ({
                   lineHeight: 1.3,
                   ...getTruncateStyles(titleTruncateMode)
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: title })
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { children: title })
               }
             ) }),
-            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,
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Tooltip, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_material27.Typography,
               {
                 variant: "body2",
                 sx: {
@@ -4866,24 +5576,24 @@ var PageHeader = ({
                   lineHeight: 1.4,
                   ...getTruncateStyles(subtitleTruncateMode)
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { children: subtitle })
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { children: subtitle })
               }
             ) })
           ] })
         ] }),
-        hasActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+        hasActions && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.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_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,
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_material27.IconButton,
               {
                 onClick: handleOpenMenu,
                 sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_MoreVert.default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_MoreVert.default, {})
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-              import_material26.Menu,
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              import_material27.Menu,
               {
                 anchorEl,
                 open: isMenuOpen,
@@ -4892,9 +5602,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_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-                      import_material26.MenuItem,
+                  primaryAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                      import_material27.MenuItem,
                       {
                         onClick: () => handleMenuAction(primaryAction.onClick),
                         disabled: primaryAction.disabled,
@@ -4907,32 +5617,32 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          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" } } } })
+                          primaryAction.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     ),
-                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Divider, { sx: { my: 0.75 } })
+                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Divider, { sx: { my: 0.75 } })
                   ] }),
-                  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,
+                  secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react31.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                      import_material27.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_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.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
                   ] }, action.id)),
-                  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,
+                  refreshAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                      import_material27.MenuItem,
                       {
                         onClick: () => handleMenuAction(refreshAction.onClick),
                         disabled: refreshAction.disabled,
@@ -4944,8 +5654,8 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          /* @__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" } } } })
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_material4.Refresh, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     )
@@ -4956,10 +5666,10 @@ var PageHeader = ({
           ] })
         ) : (
           /* DESKTOP: Primary Action Button + Secondary Actions Dropdown 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,
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_material27.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_material27.Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_material27.Button,
                 {
                   variant: primaryAction.variant || "contained",
                   color: primaryAction.color || "primary",
@@ -4967,32 +5677,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_runtime36.jsx)(TranslateText, { children: primaryAction.label })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { children: primaryAction.label })
                 }
               ),
-              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,
+              refreshAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_material27.Fab,
                 {
                   color: "default",
                   onClick: refreshAction.onClick,
                   disabled: refreshAction.disabled,
                   "aria-label": "refresh",
                   size: "small",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons_material3.Refresh, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_material4.Refresh, {})
                 }
               ) })
             ] }),
-            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                import_material26.IconButton,
+            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_material27.IconButton,
                 {
                   onClick: handleOpenMenu,
                   sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_KeyboardArrowDown.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_KeyboardArrowDown.default, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                import_material26.Menu,
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_material27.Menu,
                 {
                   anchorEl,
                   open: isMenuOpen,
@@ -5000,17 +5710,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_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,
+                  children: secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react31.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                      import_material27.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_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.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
@@ -5020,14 +5730,14 @@ var PageHeader = ({
             ] })
           ] })
         ) }),
-        customFragment && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: customFragment })
+        customFragment && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: customFragment })
       ]
     }
   );
 };
 var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_material26.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_material27.Box,
     {
       sx: {
         width: "100%",
@@ -5043,8 +5753,8 @@ var PageComponent = ({
   header,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_material26.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_material27.Box,
     {
       sx: {
         //pt: 2,
@@ -5053,8 +5763,8 @@ var PageComponent = ({
         overflowY: "auto",
         boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(PageContainer, { children: [
-        header && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PageHeader, { ...header }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(PageContainer, { children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PageHeader, { ...header }),
         children
       ] })
     }
@@ -5062,9 +5772,9 @@ var PageComponent = ({
 };
 
 // src/UI/components/layout/FilterContainerComponent.tsx
-var import_react31 = __toESM(require("react"));
-var import_material27 = require("@mui/material");
-var import_jsx_runtime37 = (
+var import_react32 = __toESM(require("react"));
+var import_material28 = require("@mui/material");
+var import_jsx_runtime38 = (
   /* Автоматическая обертка каждого дочернего элемента в Grid size */
   require("react/jsx-runtime")
 );
@@ -5073,26 +5783,26 @@ var FilterContainerComponent = ({
   children,
   sx
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_material27.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_material28.Paper,
     {
       variant: "outlined",
       sx: [
         { p: 2, mb: 3 },
         ...Array.isArray(sx) ? sx : [sx]
       ],
-      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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react32.default.Fragment, { children: sec }, idx)) : children })
     }
   );
 };
 
 // src/UI/components/layout/PageLinkComponent.tsx
-var import_icons_material4 = require("@mui/icons-material");
-var import_material28 = require("@mui/material");
-var import_react32 = __toESM(require("react"));
+var import_icons_material5 = require("@mui/icons-material");
+var import_material29 = require("@mui/material");
+var import_react33 = __toESM(require("react"));
 var import_react_router_dom = require("react-router-dom");
 init_context();
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var PageLinkComponent = ({
   overrideNamespace,
   title,
@@ -5105,8 +5815,8 @@ var PageLinkComponent = ({
   bgcolor
 }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-    import_material28.Card,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    import_material29.Card,
     {
       sx: (theme) => ({
         height: "100%",
@@ -5119,21 +5829,21 @@ var PageLinkComponent = ({
         ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_material28.CardHeader,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_material29.CardHeader,
           {
-            avatar: icon ? import_react32.default.cloneElement(icon, {
+            avatar: icon ? import_react33.default.cloneElement(icon, {
               sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__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_runtime39.jsx)(import_icons_material5.Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace, children: subheader }) : subheader })
           }
         ),
-        /* @__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,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_material29.CardContent, { sx: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            import_material29.ListItem,
             {
               disablePadding: true,
               sx: {
@@ -5144,18 +5854,18 @@ var PageLinkComponent = ({
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                  import_material28.ListItemIcon,
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.ListItemIcon,
                   {
                     sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
                     onClick: () => {
                       if (link?.href) navigate(link.href);
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material4.ArrowRight, { fontSize: "small", color: "inherit" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_material5.ArrowRight, { fontSize: "small", color: "inherit" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { children: link.onClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                  import_material28.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.ListItemText, { children: link.onClick ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.Button,
                   {
                     size: "small",
                     variant: "text",
@@ -5178,10 +5888,10 @@ var PageLinkComponent = ({
                         // Эффект подчеркивания, как у ссылки
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : link.href ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                  import_material28.Link,
+                ) : link.href ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.Link,
                   {
                     component: import_react_router_dom.Link,
                     to: link.href,
@@ -5198,29 +5908,29 @@ var PageLinkComponent = ({
                         backgroundColor: "transparent"
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.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 }) })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
               ]
             },
             index
           )) })
         ] }),
-        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 }) })
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Button, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
       ]
     }
   );
 };
 
 // src/UI/components/layout/CollapsedContainerComponent.tsx
-var import_icons_material5 = require("@mui/icons-material");
-var import_material29 = require("@mui/material");
-var import_react33 = require("react");
+var import_icons_material6 = require("@mui/icons-material");
+var import_material30 = require("@mui/material");
+var import_react34 = require("react");
 init_context();
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var ExpandMore = (0, import_material29.styled)((props) => {
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ExpandMore = (0, import_material30.styled)((props) => {
   const { expand, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_material5.ExpandMore, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_material6.ExpandMore, {}) });
 })(({ theme, expand }) => ({
   transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
   transition: theme.transitions.create("transform", {
@@ -5235,14 +5945,14 @@ var ExpandMore = (0, import_material29.styled)((props) => {
 }));
 var CollapsedContainerComponent = (props) => {
   const { displayState } = useAppTheme();
-  const [expanded, setExpanded] = (0, import_react33.useState)(props.expanded === void 0 ? false : props.expanded);
+  const [expanded, setExpanded] = (0, import_react34.useState)(props.expanded === void 0 ? false : props.expanded);
   const handleExpandClick = () => {
     setExpanded(!expanded);
     props.onExpanded && props.onExpanded(!expanded);
   };
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material30.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_runtime40.jsxs)(
+      import_material30.Box,
       {
         onClick: () => handleExpandClick(),
         sx: {
@@ -5253,16 +5963,16 @@ var CollapsedContainerComponent = (props) => {
           pr: 2
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_material29.CardHeader,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_material30.CardHeader,
             {
               sx: { flexGrow: 1 },
-              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
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Tooltip, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Box, { sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             ExpandMore,
             {
               expand: expanded,
@@ -5273,31 +5983,31 @@ var CollapsedContainerComponent = (props) => {
         ]
       }
     ),
-    /* @__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 })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material30.Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Divider, { variant: "middle" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.CardContent, { children: props.children })
     ] })
   ] });
 };
 
 // src/i18n/LanguageSelector.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_i18next6 = require("react-i18next");
-var import_material30 = require("@mui/material");
+var import_material31 = require("@mui/material");
 init_LocalizationProvider();
 init_UserSettingsProvider();
 init_SupabaseProvider();
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = 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 [languages, setLanguages] = (0, import_react35.useState)([]);
+  const [loading, setLoading] = (0, import_react35.useState)(true);
   const { changeLanguage } = useLocalization();
   const { settings: userSettings, setLanguage } = useUserSettings();
-  const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react35.useState)(null);
   const open = Boolean(anchorEl);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const fetchLanguages = async () => {
       try {
         const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
@@ -5324,14 +6034,14 @@ var LanguageSelector = () => {
     handleClose();
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.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,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_material31.IconButton,
       {
         onClick: handleClick,
         size: "small",
@@ -5346,8 +6056,8 @@ var LanguageSelector = () => {
             backgroundColor: "action.hover"
           }
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_material30.Box,
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_material31.Box,
           {
             sx: {
               width: 24,
@@ -5366,8 +6076,8 @@ var LanguageSelector = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_material30.Menu,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_material31.Menu,
       {
         id: "language-menu",
         anchorEl,
@@ -5387,8 +6097,8 @@ var LanguageSelector = () => {
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
         children: languages.map((lang) => {
           const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-            import_material30.MenuItem,
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+            import_material31.MenuItem,
             {
               selected: isSelected,
               onClick: () => handleSelectLanguage(lang.code),
@@ -5400,8 +6110,8 @@ var LanguageSelector = () => {
                 px: 2
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                  import_material30.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  import_material31.Box,
                   {
                     sx: {
                       width: 22,
@@ -5415,7 +6125,7 @@ var LanguageSelector = () => {
                     dangerouslySetInnerHTML: { __html: lang.svg_flag }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
               ]
             },
             lang.code
@@ -5429,11 +6139,11 @@ 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 [languages, setLanguages] = (0, import_react35.useState)([]);
+  const [loading, setLoading] = (0, import_react35.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, import_react35.useState)(null);
   const open = Boolean(anchorEl);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const fetchLanguages = async () => {
       try {
         const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
@@ -5458,14 +6168,14 @@ var PublicLanguageSelector = () => {
     handleClose();
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.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,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_material31.IconButton,
       {
         onClick: handleClick,
         size: "small",
@@ -5480,8 +6190,8 @@ var PublicLanguageSelector = () => {
             backgroundColor: "action.hover"
           }
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_material30.Box,
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_material31.Box,
           {
             sx: {
               width: 24,
@@ -5500,8 +6210,8 @@ var PublicLanguageSelector = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_material30.Menu,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_material31.Menu,
       {
         id: "language-menu",
         anchorEl,
@@ -5521,8 +6231,8 @@ var PublicLanguageSelector = () => {
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
         children: languages.map((lang) => {
           const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-            import_material30.MenuItem,
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+            import_material31.MenuItem,
             {
               selected: isSelected,
               onClick: () => handleSelectLanguage(lang.code),
@@ -5534,8 +6244,8 @@ var PublicLanguageSelector = () => {
                 px: 2
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                  import_material30.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  import_material31.Box,
                   {
                     sx: {
                       width: 22,
@@ -5549,7 +6259,7 @@ var PublicLanguageSelector = () => {
                     dangerouslySetInnerHTML: { __html: lang.svg_flag }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material30.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material31.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
               ]
             },
             lang.code
@@ -5561,14 +6271,14 @@ var PublicLanguageSelector = () => {
 };
 
 // src/UI/components/tables/TablePaginationComponent.tsx
-var import_material31 = require("@mui/material");
+var import_material32 = 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 import_jsx_runtime42 = require("react/jsx-runtime");
 var CustomPaginationActions = (props) => {
   const {
     count,
@@ -5586,11 +6296,11 @@ var CustomPaginationActions = (props) => {
   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, {}) }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_material32.Box, { sx: { flexShrink: 0, ml: 2, display: "flex", alignItems: "center" }, children: [
+    showFirstButton && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslateText, { overrideNamespace: ns, children: "First page" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material32.IconButton, { onClick: handleFirstPage, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_FirstPage.default, {}) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslateText, { overrideNamespace: ns, children: "Previous page" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material32.IconButton, { onClick: handleBack, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_KeyboardArrowLeft.default, {}) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslateText, { overrideNamespace: ns, children: "Next page" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material32.IconButton, { onClick: handleNext, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_KeyboardArrowRight.default, {}) }) }) }),
+    showLastButton && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslateText, { overrideNamespace: ns, children: "Last page" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material32.IconButton, { onClick: handleLast, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_LastPage.default, {}) }) }) })
   ] });
 };
 var TablePaginationComponent = ({
@@ -5604,8 +6314,8 @@ var TablePaginationComponent = ({
 }) => {
   const { displayState } = useAppTheme();
   const activeNamespace = overrideNamespace || "form_components";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_material31.TablePagination,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_material32.TablePagination,
     {
       rowsPerPageOptions,
       component: "div",
@@ -5616,8 +6326,8 @@ var TablePaginationComponent = ({
       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" }),
+      labelRowsPerPage: displayState.isMobile ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TranslateText, { overrideNamespace: activeNamespace, children: "Rows per page" }),
         ":"
       ] }),
       ActionsComponent: CustomPaginationActions,
@@ -5653,16 +6363,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react35 = require("react");
+var import_react36 = 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_react35.useState)("offline");
-  const [lastSeen, setLastSeen] = (0, import_react35.useState)(initialLastSeenAt ?? null);
-  const lastSeenRef = (0, import_react35.useRef)(initialLastSeenAt ?? null);
+  const [status, setStatus] = (0, import_react36.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react36.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react36.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -5678,7 +6388,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -5788,6 +6498,7 @@ var Utils = {
   CollapsedContainerComponent,
   ConfirmationProvider,
   CopyClipboardButtonComponent,
+  DateTimePickerComponent,
   EmailInputComponent,
   ErrorAlertComponent,
   ExpandableNoteComponent,
@@ -5815,7 +6526,7 @@ var Utils = {
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
-  TruncatedTypography,
+  TruncatedTypographyComponent,
   UrlComponent,
   UserAvatarComponent,
   UserPopoverComponent,