@serhii.olishevskyi/docs 1.0.3 → 1.0.5

package/dist/index.mjs

@@ -13,6 +13,7 @@ import {
   TranslateText,
   TranslationDialog,
   TranslationEditProvider,
+  UserPopoverComponent_default,
   UserRoleChipComponent,
   UserStatusChipComponent,
   translationService,
@@ -25,7 +26,7 @@ import {
   useToast,
   useTranslationEdit,
   useTranslationNamespace
-} from "./chunk-CT3G3YSD.mjs";
+} from "./chunk-R2QQMMHL.mjs";
 
 // src/UI/components/inputs/TextFieldComponent.tsx
 import { useState } from "react";
@@ -723,7 +724,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-BNJWFSLT.mjs"));
+var LazyUserPopover = lazy(() => import("./UserPopoverComponent-JBJBONYL.mjs"));
 var getInitials = (name) => {
   if (!name) return "?";
   const parts = name.trim().split(" ");
@@ -851,6 +852,7 @@ var UI = {
   DataDisplay: {
     TranslatableTooltip: TranslatableTooltipComponent,
     UserAvatar: UserAvatarComponent,
+    UserPopover: UserPopoverComponent_default,
     UserRoleChip: UserRoleChipComponent,
     UserStatusChip: UserStatusChipComponent
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -24,9 +24,10 @@
     "@mui/material": "^9.3.1",
     "@mui/x-data-grid-premium": "^9.12.0",
     "@mui/x-license": "^9.12.0",
+    "i18next": "^26.3.6",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-i18next": "^13.0.0"
+    "react-i18next": "^17.0.11"
   },
   "devDependencies": {
     "tsup": "^8.5.1",

package/dist/UserPopoverComponent-BNJWFSLT.mjs

@@ -1,399 +0,0 @@
-import {
-  CopyClipboardButtonComponent,
-  TranslatableTooltipComponent,
-  TranslateText,
-  UserRoleChipComponent,
-  UserStatusChipComponent,
-  getUserLastSeenAt,
-  useAuth,
-  useLocalization,
-  useSupabase
-} from "./chunk-CT3G3YSD.mjs";
-
-// src/UI/components/data.display/UserPopoverComponent.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import {
-  Popover,
-  Box,
-  Avatar,
-  Typography,
-  Divider,
-  IconButton,
-  CircularProgress,
-  Stack,
-  Badge
-} from "@mui/material";
-import {
-  NotificationsNone as NotificationIcon,
-  AssignmentOutlined as TaskIcon,
-  ChatBubble as ChatIcon,
-  Work as WorkIcon,
-  CalendarToday as CalendarIcon,
-  Phone as PhoneIcon,
-  Close as CloseIcon,
-  Email as EmailIcon,
-  AccessTime as AccessTimeIcon,
-  Cake as CakeIcon
-} from "@mui/icons-material";
-
-// src/context/UserSettingsProvider.tsx
-import { createContext, useContext, useEffect, useState, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-var UserSettingsContext = createContext(void 0);
-var useUserSettings = () => {
-  const context = useContext(UserSettingsContext);
-  if (!context) {
-    throw new Error("useUserSettings should be used within the UserSettingsProvider");
-  }
-  return context;
-};
-
-// src/UI/components/data.display/UserPopoverComponent.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var useUserStatus = (supabase, userId, open) => {
-  const [lastSeenAt, setLastSeenAt] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  useEffect2(() => {
-    if (!userId || !open) {
-      setLastSeenAt(null);
-      setLoading(false);
-      return;
-    }
-    let isMounted = true;
-    const loadStatus = async () => {
-      setLoading(true);
-      const date = await getUserLastSeenAt(supabase, userId);
-      if (isMounted) {
-        setLastSeenAt(date);
-        setLoading(false);
-      }
-    };
-    loadStatus();
-    const channel = supabase.channel(`user_status_popover_${userId}`).on(
-      "postgres_changes",
-      {
-        event: "*",
-        schema: "public",
-        table: "user_sessions",
-        filter: `user_id=eq.${userId}`
-      },
-      () => {
-        loadStatus();
-      }
-    ).subscribe();
-    return () => {
-      isMounted = false;
-      supabase.removeChannel(channel);
-    };
-  }, [userId, open]);
-  const isOnline = Boolean(
-    lastSeenAt && (/* @__PURE__ */ new Date()).getTime() - new Date(lastSeenAt).getTime() < 3 * 60 * 1e3
-  );
-  return { lastSeenAt, isOnline, loading };
-};
-var UserPopoverComponent = ({
-  overrideNamespace,
-  userId,
-  anchorEl,
-  open,
-  onClose
-}) => {
-  const supabase = useSupabase();
-  const { activeCompanyId, membership: currentMembership } = useAuth();
-  const { openChatWithUser } = useUserSettings();
-  const { formatDate, formatRelativeTime } = useLocalization();
-  const [profileData, setProfileData] = useState2(null);
-  const [membershipData, setMembershipData] = useState2(null);
-  const [avatarUrl, setAvatarUrl] = useState2(null);
-  const [coverUrl, setCoverUrl] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const { lastSeenAt, isOnline } = useUserStatus(supabase, userId, open);
-  useEffect2(() => {
-    if (!open || !userId || !activeCompanyId) return;
-    let isMounted = true;
-    setLoading(true);
-    const fetchUserData = async () => {
-      try {
-        const { data, error } = await supabase.rpc("get_user_avatar_and_profile", {
-          p_company_id: activeCompanyId,
-          //currentMembership?.id || null,
-          p_user_id: userId
-        }).maybeSingle();
-        if (error) throw error;
-        if (isMounted && data) {
-          const rpcData = data;
-          const profile = rpcData.profile;
-          const membership = rpcData.membership;
-          setProfileData(profile);
-          setMembershipData(membership);
-          const avatarPath = profile?.avatar_path || profile?.avatar_url;
-          if (avatarPath && !avatarPath.startsWith("http")) {
-            const { data: avatarSigned } = await supabase.storage.from("user-media").createSignedUrl(avatarPath, 3600);
-            if (isMounted) setAvatarUrl(avatarSigned?.signedUrl || null);
-          } else {
-            if (isMounted) setAvatarUrl(avatarPath || null);
-          }
-          const coverPath = profile?.cover_image_path || profile?.cover_image_url;
-          if (coverPath && !coverPath.startsWith("http")) {
-            const { data: coverSigned } = await supabase.storage.from("user-media").createSignedUrl(coverPath, 3600);
-            if (isMounted) setCoverUrl(coverSigned?.signedUrl || null);
-          } else {
-            if (isMounted) setCoverUrl(coverPath || null);
-          }
-        }
-      } catch (err) {
-        console.error("Error loading user popover data:", err);
-      } finally {
-        if (isMounted) setLoading(false);
-      }
-    };
-    fetchUserData();
-    return () => {
-      isMounted = false;
-    };
-  }, [open, userId, currentMembership?.id, activeCompanyId]);
-  const getStatusChip = () => {
-    if (!profileData) return null;
-    return /* @__PURE__ */ jsx2(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";
-    if (!lastSeenAt2) return "textSecondary";
-    const diffInMinutes = (Date.now() - new Date(lastSeenAt2).getTime()) / (1e3 * 60);
-    if (diffInMinutes <= 15) {
-      return "warning";
-    }
-    return "textSecondary";
-  };
-  const getStatusIconColor = (isOnline2, lastSeenAt2) => {
-    if (isOnline2) return "success";
-    if (!lastSeenAt2) return "inherit";
-    const diffInMinutes = (Date.now() - new Date(lastSeenAt2).getTime()) / (1e3 * 60);
-    if (diffInMinutes <= 15) {
-      return "warning";
-    }
-    return "inherit";
-  };
-  const canChat = currentMembership && membershipData && currentMembership.id !== membershipData.id;
-  return /* @__PURE__ */ jsx2(
-    Popover,
-    {
-      open,
-      anchorEl,
-      onClose,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      slotProps: {
-        paper: {
-          sx: {
-            width: 350,
-            p: 0,
-            overflow: "hidden",
-            borderRadius: 0,
-            boxShadow: 4
-          }
-        }
-      },
-      children: loading ? /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ jsx2(CircularProgress, { size: 28 }) }) : profileData ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              position: "relative",
-              width: "100%",
-              height: 96,
-              bgcolor: "action.selected"
-            },
-            children: [
-              coverUrl && /* @__PURE__ */ jsx2(
-                Box,
-                {
-                  component: "img",
-                  src: coverUrl,
-                  alt: "Profile background",
-                  sx: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                    display: "block",
-                    m: 0,
-                    p: 0
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                IconButton,
-                {
-                  size: "small",
-                  onClick: onClose,
-                  sx: {
-                    position: "absolute",
-                    top: 8,
-                    right: 8,
-                    color: "common.white",
-                    bgcolor: "rgba(0, 0, 0, 0.4)",
-                    backdropFilter: "blur(4px)",
-                    transition: "all 0.2s ease",
-                    "&:hover": {
-                      bgcolor: "rgba(0, 0, 0, 0.8)",
-                      transform: "scale(1.1)"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "small" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box, { sx: { p: 2, pt: 0 }, children: [
-          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-end", mt: "-18px", mb: 1 }, children: [
-            /* @__PURE__ */ jsx2(
-              Badge,
-              {
-                overlap: "circular",
-                anchorOrigin: { vertical: "bottom", horizontal: "right" },
-                variant: "dot",
-                sx: {
-                  "& .MuiBadge-badge": {
-                    backgroundColor: isOnline ? "#44b700" : "#bdbdbd",
-                    color: isOnline ? "#44b700" : "#bdbdbd",
-                    boxShadow: `0 0 0 2px #fff`,
-                    width: 12,
-                    height: 12,
-                    borderRadius: "50%",
-                    "&::after": isOnline ? {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                      borderRadius: "50%",
-                      animation: "ripple 1.2s infinite ease-in-out",
-                      border: "1px solid currentColor",
-                      content: '""'
-                    } : {}
-                  },
-                  "@keyframes ripple": {
-                    "0%": {
-                      transform: "scale(.8)",
-                      opacity: 1
-                    },
-                    "100%": {
-                      transform: "scale(2.4)",
-                      opacity: 0
-                    }
-                  }
-                },
-                children: /* @__PURE__ */ jsx2(
-                  Avatar,
-                  {
-                    src: avatarUrl || coverUrl || void 0,
-                    sx: {
-                      width: 65,
-                      height: 65,
-                      border: "3px solid",
-                      borderColor: "background.paper",
-                      boxShadow: 2,
-                      bgcolor: "primary.main",
-                      fontSize: 22,
-                      fontWeight: 600
-                    },
-                    children: profileData.display_name?.[0]?.toUpperCase() || "?"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(Box, { sx: { overflow: "hidden", pb: 0.5 }, children: [
-              /* @__PURE__ */ jsx2(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__ */ jsx2(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: membershipData.employee_post })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { my: 1, flexWrap: "wrap", gap: 0.5 }, children: [
-            getStatusChip(),
-            /* @__PURE__ */ jsx2(UserRoleChipComponent, { role: membershipData?.role || "user" })
-          ] }),
-          /* @__PURE__ */ jsx2(Divider, { sx: { my: 1.5 } }),
-          /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { fontSize: "0.875rem", mb: 1.5 }, children: [
-            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-              /* @__PURE__ */ jsx2(AccessTimeIcon, { fontSize: "small", color: getStatusIconColor(isOnline, lastSeenAt) }),
-              /* @__PURE__ */ jsx2(Typography, { variant: "body2", color: getStatusTypographyColor(isOnline, lastSeenAt), children: isOnline ? /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Online" }) : lastSeenAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Last seen" }),
-                ":",
-                " ",
-                /* @__PURE__ */ jsx2("strong", { children: formatRelativeTime(lastSeenAt) })
-              ] }) : /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Offline" }) })
-            ] }),
-            profileData.email && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-              /* @__PURE__ */ jsx2(EmailIcon, { fontSize: "small" }),
-              /* @__PURE__ */ jsx2(Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: profileData.email }),
-              /* @__PURE__ */ jsx2(CopyClipboardButtonComponent, { textToCopy: profileData.email })
-            ] }),
-            membershipData?.employee_post && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-              /* @__PURE__ */ jsx2(WorkIcon, { fontSize: "small" }),
-              /* @__PURE__ */ jsx2(Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: membershipData.employee_post }),
-              /* @__PURE__ */ jsx2(CopyClipboardButtonComponent, { textToCopy: membershipData.employee_post })
-            ] }),
-            profileData.phone && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-              /* @__PURE__ */ jsx2(PhoneIcon, { fontSize: "small" }),
-              /* @__PURE__ */ jsx2(Typography, { variant: "body2", color: "text.primary", children: profileData.phone })
-            ] }),
-            profileData.birthday && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-              /* @__PURE__ */ jsx2(CakeIcon, { fontSize: "small" }),
-              /* @__PURE__ */ jsx2(Typography, { variant: "body2", color: "text.primary", children: formatDate(profileData.birthday) })
-            ] }),
-            membershipData?.created_at && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-              /* @__PURE__ */ jsx2(CalendarIcon, { fontSize: "small" }),
-              /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.primary", children: [
-                /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "In company from" }),
-                ": ",
-                formatDate(membershipData.created_at)
-              ] })
-            ] }),
-            profileData.description && /* @__PURE__ */ jsx2(
-              Typography,
-              {
-                variant: "caption",
-                color: "text.secondary",
-                sx: {
-                  display: "-webkit-box",
-                  WebkitLineClamp: 2,
-                  WebkitBoxOrient: "vertical",
-                  overflow: "hidden",
-                  mt: 0.5
-                },
-                children: profileData.description
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx2(Divider, { sx: { my: 1 } }),
-          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-around", pt: 0.5 }, children: [
-            /* @__PURE__ */ jsx2(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Send a notification" }), children: /* @__PURE__ */ jsx2(IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ jsx2(NotificationIcon, { fontSize: "small" }) }) }),
-            /* @__PURE__ */ jsx2(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set a task" }), children: /* @__PURE__ */ jsx2(IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ jsx2(TaskIcon, { fontSize: "small" }) }) }),
-            /* @__PURE__ */ jsx2(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Start a chat" }), children: /* @__PURE__ */ jsx2(
-              IconButton,
-              {
-                size: "small",
-                color: "primary",
-                disabled: !canChat,
-                onClick: () => membershipData && openChatWithUser(membershipData.id),
-                children: /* @__PURE__ */ jsx2(ChatIcon, { fontSize: "small" })
-              }
-            ) })
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ jsx2(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx2(
-        Typography,
-        {
-          color: "error",
-          variant: "body2",
-          children: /* @__PURE__ */ jsx2(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Failed to load user data" })
-        }
-      ) })
-    }
-  );
-};
-var UserPopoverComponent_default = UserPopoverComponent;
-export {
-  UserPopoverComponent,
-  UserPopoverComponent_default as default
-};