@serhii.olishevskyi/docs 1.0.1 → 1.0.3

package/dist/UserPopoverComponent-BNJWFSLT.mjs

@@ -0,0 +1,399 @@
+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
+};