@serhii.olishevskyi/docs 1.1.2 → 1.1.4

package/dist/index.js

@@ -169,11 +169,89 @@ var init_deviceId = __esm({
 });
 
 // src/services/session.service.ts
-var trackUserSession, isCurrentSessionValid, getUserLastSeenAt;
+var fetchCompanySessions, trackUserSession, fetchUserSessions, isCurrentSessionValid, groupSessionsByUser, getUserLastSeenAt, getUsersLastSeenMap;
 var init_session_service = __esm({
   "src/services/session.service.ts"() {
     "use strict";
     init_deviceId();
+    fetchCompanySessions = async (supabase, companyId, page = 1, pageSize = 5, searchQuery = "") => {
+      const currentDeviceId = getDeviceId();
+      let query = supabase.from("memberships").select(`
+      user_id,
+      role,
+      employee_post,
+      profiles (
+        id,
+        display_name,
+        first_name,
+        last_name
+      )
+    `, { count: "exact" }).eq("company_id", companyId);
+      if (searchQuery.trim()) {
+        const q = `%${searchQuery.trim()}%`;
+        const { data: matchedProfiles } = await supabase.from("profiles").select("id").or(`display_name.ilike.${q},first_name.ilike.${q},last_name.ilike.${q}`);
+        const matchedUserIds = (matchedProfiles || []).map((p) => p.id);
+        if (matchedUserIds.length > 0) {
+          query = query.or(`employee_post.ilike.${q},user_id.in.(${matchedUserIds.join(",")})`);
+        } else {
+          query = query.ilike("employee_post", q);
+        }
+      }
+      const { data: members, error: membersError } = await query;
+      if (membersError) throw membersError;
+      if (!members || members.length === 0) {
+        return { data: [], totalCount: 0 };
+      }
+      const userMap = /* @__PURE__ */ new Map();
+      members.forEach((m) => {
+        const profile = Array.isArray(m.profiles) ? m.profiles[0] : m.profiles;
+        const name = profile?.display_name || [profile?.first_name, profile?.last_name].filter(Boolean).join(" ") || "\u041D\u0435\u0432\u0456\u0434\u043E\u043C\u0438\u0439 \u043A\u043E\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447";
+        userMap.set(m.user_id, {
+          name,
+          post: m.employee_post || "\u041F\u043E\u0441\u0430\u0434\u0430 \u043D\u0435 \u0432\u043A\u0430\u0437\u0430\u043D\u0430",
+          role: m.role || "user"
+        });
+      });
+      const userIds = Array.from(userMap.keys());
+      const { data: sessions, error: sessionsError } = await supabase.from("user_sessions").select("*").in("user_id", userIds).order("last_seen_at", { ascending: false });
+      if (sessionsError) throw sessionsError;
+      const groupsMap = /* @__PURE__ */ new Map();
+      (sessions || []).forEach((s) => {
+        const userInfo = userMap.get(s.user_id);
+        if (!userInfo) return;
+        if (!groupsMap.has(s.user_id)) {
+          groupsMap.set(s.user_id, {
+            userId: s.user_id,
+            userName: userInfo.name,
+            employeePost: userInfo.post,
+            role: userInfo.role,
+            sessions: []
+          });
+        }
+        groupsMap.get(s.user_id).sessions.push({
+          id: s.id,
+          user_id: s.user_id,
+          user_agent: s.user_agent,
+          ip_address: s.ip_address,
+          created_at: s.created_at,
+          last_seen_at: s.last_seen_at,
+          device_id: s.device_id,
+          is_current: s.device_id === currentDeviceId,
+          user_name: userInfo.name,
+          employee_post: userInfo.post,
+          role: userInfo.role,
+          url: s.url
+        });
+      });
+      const allGroupedWithSessions = Array.from(groupsMap.values()).filter((group) => group.sessions.length > 0).sort((a, b) => a.userName.localeCompare(b.userName, "uk"));
+      const totalCount = allGroupedWithSessions.length;
+      const from = (page - 1) * pageSize;
+      const paginatedData = allGroupedWithSessions.slice(from, from + pageSize);
+      return {
+        data: paginatedData,
+        totalCount
+      };
+    };
     trackUserSession = async (supabase, userId) => {
       const deviceId = getDeviceId();
       let ip = "";
@@ -196,6 +274,17 @@ var init_session_service = __esm({
         { onConflict: "user_id, device_id" }
       );
     };
+    fetchUserSessions = async (supabase) => {
+      const currentDeviceId = getDeviceId();
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) return [];
+      const { data, error } = await supabase.from("user_sessions").select("*").eq("user_id", user.id).order("last_seen_at", { ascending: false });
+      if (error) throw error;
+      return (data || []).map((s) => ({
+        ...s,
+        is_current: s.device_id === currentDeviceId
+      }));
+    };
     isCurrentSessionValid = async (supabase, userId) => {
       try {
         const currentDeviceId = getDeviceId();
@@ -211,11 +300,42 @@ var init_session_service = __esm({
         return true;
       }
     };
+    groupSessionsByUser = (sessions) => {
+      const groupsMap = /* @__PURE__ */ new Map();
+      sessions.forEach((session) => {
+        const userId = session.user_id;
+        if (!groupsMap.has(userId)) {
+          groupsMap.set(userId, {
+            userId,
+            userName: session.user_name || "\u041D\u0435\u0432\u0456\u0434\u043E\u043C\u0438\u0439 \u043A\u043E\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447",
+            employeePost: session.employee_post || "\u041F\u043E\u0441\u0430\u0434\u0430 \u043D\u0435 \u0432\u043A\u0430\u0437\u0430\u043D\u0430",
+            role: session.role || "user",
+            sessions: []
+          });
+        }
+        groupsMap.get(userId).sessions.push(session);
+      });
+      return Array.from(groupsMap.values()).sort(
+        (a, b) => a.userName.localeCompare(b.userName, "uk")
+      );
+    };
     getUserLastSeenAt = async (supabase, userId) => {
       const { data, error } = await supabase.from("user_sessions").select("last_seen_at").eq("user_id", userId).order("last_seen_at", { ascending: false }).limit(1).maybeSingle();
       if (error || !data) return null;
       return data.last_seen_at;
     };
+    getUsersLastSeenMap = async (supabase, userIds) => {
+      if (!userIds.length) return {};
+      const { data, error } = await supabase.from("user_sessions").select("user_id, last_seen_at").in("user_id", userIds).order("last_seen_at", { ascending: false });
+      if (error || !data) return {};
+      const resultMap = {};
+      for (const session of data) {
+        if (!resultMap[session.user_id]) {
+          resultMap[session.user_id] = session.last_seen_at;
+        }
+      }
+      return resultMap;
+    };
   }
 });
 
@@ -2617,6 +2737,7 @@ __export(index_exports, {
   ConfirmationProvider: () => ConfirmationProvider,
   LocalizationProvider: () => LocalizationProvider,
   Providers: () => Providers,
+  Services: () => Services,
   SupabaseProvider: () => SupabaseProvider,
   ThemeProvider: () => ThemeProvider,
   ToastProvider: () => ToastProvider,
@@ -3452,6 +3573,399 @@ init_CopyClipboardButtonComponent();
 init_UserRoleChipComponent();
 init_UserStatusChipComponent();
 init_UserPopoverComponent();
+
+// src/UI/components/data.display/MyAvatarComponent.tsx
+var import_react23 = require("react");
+var import_material16 = require("@mui/material");
+init_context();
+var import_jsx_runtime26 = require("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] = (0, import_react23.useState)(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_material16.Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_material16.Avatar,
+      {
+        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__ */ (0, import_jsx_runtime26.jsx)(
+      import_material16.Popover,
+      {
+        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__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/i18n/LanguageSelector.tsx
+var import_react24 = require("react");
+var import_react_i18next5 = require("react-i18next");
+var import_material17 = require("@mui/material");
+init_LocalizationProvider();
+init_UserSettingsProvider();
+init_SupabaseProvider();
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next5.useTranslation)();
+  const [languages, setLanguages] = (0, import_react24.useState)([]);
+  const [loading, setLoading] = (0, import_react24.useState)(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react24.useEffect)(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.IconButton,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material17.Box,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_material17.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_material17.Box,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next5.useTranslation)();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = (0, import_react24.useState)([]);
+  const [loading, setLoading] = (0, import_react24.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react24.useEffect)(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.IconButton,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material17.Box,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_material17.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_material17.Box,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// src/UI/index.ts
 var UI = {
   Inputs: {
     TextField: TextFieldComponent,
@@ -3467,16 +3981,35 @@ var UI = {
     UserAvatar: UserAvatarComponent,
     UserPopover: UserPopoverComponent_default,
     UserRoleChip: UserRoleChipComponent,
-    UserStatusChip: UserStatusChipComponent
-  }
+    UserStatusChip: UserStatusChipComponent,
+    MyAvatar: MyAvatarComponent
+  },
   /*Layout: {
     Row: FormRow,
   },*/
+  Widgets: {
+    ProtectedLanguageSelector: LanguageSelector,
+    PublicLanguageSelector
+  }
 };
 
 // src/index.ts
 init_context();
 init_context();
+
+// src/services/index.ts
+init_session_service();
+var Services = {
+  SessionService: {
+    fetchCompanySessions,
+    trackUserSession,
+    fetchUserSessions,
+    isCurrentSessionValid,
+    groupSessionsByUser,
+    getUserLastSeenAt,
+    getUsersLastSeenMap
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIProvider,
@@ -3486,6 +4019,7 @@ init_context();
   ConfirmationProvider,
   LocalizationProvider,
   Providers,
+  Services,
   SupabaseProvider,
   ThemeProvider,
   ToastProvider,