@serhii.olishevskyi/docs 1.1.2 → 1.1.4

package/dist/index.mjs

@@ -19,6 +19,13 @@ import {
   UserRoleChipComponent,
   UserSettingsProvider,
   UserStatusChipComponent,
+  fetchCompanySessions,
+  fetchUserSessions,
+  getUserLastSeenAt,
+  getUsersLastSeenMap,
+  groupSessionsByUser,
+  isCurrentSessionValid,
+  trackUserSession,
   translationService,
   useAI,
   useAppSettings,
@@ -32,7 +39,7 @@ import {
   useTranslationEdit,
   useTranslationNamespace,
   useUserSettings
-} from "./chunk-BAFKGCJJ.mjs";
+} from "./chunk-ERXHWCQ5.mjs";
 
 // src/UI/components/inputs/TextFieldComponent.tsx
 import { useState } from "react";
@@ -730,7 +737,7 @@ var EmailInputComponent = ({
 import { useState as useState5, useEffect as useEffect2, lazy, Suspense } from "react";
 import { Avatar, Tooltip as Tooltip3, Typography as Typography2 } from "@mui/material";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var LazyUserPopover = lazy(() => import("./UserPopoverComponent-64KAMDBO.mjs"));
+var LazyUserPopover = lazy(() => import("./UserPopoverComponent-ZG4UFBGJ.mjs"));
 var getInitials = (name) => {
   if (!name) return "?";
   const parts = name.trim().split(" ");
@@ -844,6 +851,401 @@ var UserAvatarComponent = ({
   ] });
 };
 
+// src/UI/components/data.display/MyAvatarComponent.tsx
+import { useState as useState6 } from "react";
+import { Avatar as Avatar2, Box as Box4, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var getInitials2 = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var MyAvatarComponent = ({
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  sx = {}
+}) => {
+  const { profile: userProfile, loading: isLoading } = useAuth();
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx6(
+      Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx6(
+      Avatar2,
+      {
+        src: userProfile?.avatar_url || void 0,
+        alt: userProfile?.display_name || "User Avatar",
+        onMouseEnter: handlePopoverOpen,
+        onMouseLeave: handlePopoverClose,
+        sx: {
+          width: size,
+          height: size,
+          fontSize: size * 0.4,
+          fontWeight: 600,
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          cursor: disablePopover ? void 0 : "pointer",
+          transition: "transform 0.2s ease, box-shadow 0.2s ease",
+          border: disableBorder ? "none" : "2px solid",
+          borderColor: "background.paper",
+          boxShadow: disableShadow ? "none" : 2,
+          "&:hover": {
+            transform: disablePopover ? "none" : "scale(1.05)"
+          },
+          ...sx
+        },
+        children: !userProfile?.avatar_url && initials
+      }
+    ),
+    !disablePopover && /* @__PURE__ */ jsx6(
+      Popover2,
+      {
+        id: `avatar-popover-${userProfile?.id}`,
+        open: isPopoverOpen,
+        anchorEl,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        onClose: handlePopoverClose,
+        disableRestoreFocus: true,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        sx: {
+          pointerEvents: "none",
+          mt: 1
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              p: 1.5,
+              borderRadius: 2,
+              boxShadow: 3
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs5(Box4, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx6(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ jsx6(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/i18n/LanguageSelector.tsx
+import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import {
+  Box as Box5,
+  Typography as Typography4,
+  CircularProgress,
+  IconButton as IconButton4,
+  Menu,
+  MenuItem,
+  Tooltip as Tooltip4
+} from "@mui/material";
+import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation2();
+  const [languages, setLanguages] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = useState7(null);
+  const open = Boolean(anchorEl);
+  useEffect3(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
+      IconButton4,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
+          Box5,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs6(
+            MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  Box5,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation2();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const [anchorEl, setAnchorEl] = useState7(null);
+  const open = Boolean(anchorEl);
+  useEffect3(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
+      IconButton4,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
+          Box5,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs6(
+            MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  Box5,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -860,11 +1262,29 @@ var UI = {
     UserAvatar: UserAvatarComponent,
     UserPopover: UserPopoverComponent_default,
     UserRoleChip: UserRoleChipComponent,
-    UserStatusChip: UserStatusChipComponent
-  }
+    UserStatusChip: UserStatusChipComponent,
+    MyAvatar: MyAvatarComponent
+  },
   /*Layout: {
     Row: FormRow,
   },*/
+  Widgets: {
+    ProtectedLanguageSelector: LanguageSelector,
+    PublicLanguageSelector
+  }
+};
+
+// src/services/index.ts
+var Services = {
+  SessionService: {
+    fetchCompanySessions,
+    trackUserSession,
+    fetchUserSessions,
+    isCurrentSessionValid,
+    groupSessionsByUser,
+    getUserLastSeenAt,
+    getUsersLastSeenMap
+  }
 };
 export {
   AIProvider,
@@ -874,6 +1294,7 @@ export {
   ConfirmationProvider,
   LocalizationProvider,
   Providers,
+  Services,
   SupabaseProvider,
   ThemeProvider,
   ToastProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",