analytica-frontend-lib 1.1.35 → 1.1.36

package/dist/index.js

@@ -75,6 +75,7 @@ __export(src_exports, {
   NavButton: () => NavButton_default,
   NotFound: () => NotFound_default,
   NotificationCard: () => NotificationCard_default,
+  NotificationEntityType: () => NotificationEntityType,
   ProfileMenuFooter: () => ProfileMenuFooter,
   ProfileMenuHeader: () => ProfileMenuHeader,
   ProfileMenuSection: () => ProfileMenuSection,
@@ -131,7 +132,10 @@ __export(src_exports, {
   Toaster: () => Toaster_default,
   VideoPlayer: () => VideoPlayer_default,
   Whiteboard: () => Whiteboard_default,
+  createNotificationStore: () => createNotificationStore,
+  createUseNotificationStore: () => createUseNotificationStore,
   createZustandAuthAdapter: () => createZustandAuthAdapter,
+  formatTimeAgo: () => formatTimeAgo,
   getDeviceType: () => getDeviceType,
   getRootDomain: () => getRootDomain,
   getStatusBadge: () => getStatusBadge,
@@ -10230,7 +10234,282 @@ var loadingModal_default = LoadingModal;
 
 // src/components/NotificationCard/NotificationCard.tsx
 var import_phosphor_react21 = require("phosphor-react");
+var import_react30 = require("react");
+
+// src/store/notificationStore.ts
+var import_zustand8 = require("zustand");
+var import_middleware2 = require("zustand/middleware");
+
+// src/types/notifications.ts
+var NotificationEntityType = /* @__PURE__ */ ((NotificationEntityType2) => {
+  NotificationEntityType2["ACTIVITY"] = "ACTIVITY";
+  NotificationEntityType2["TRAIL"] = "TRAIL";
+  NotificationEntityType2["GOAL"] = "GOAL";
+  return NotificationEntityType2;
+})(NotificationEntityType || {});
+
+// src/store/notificationStore.ts
+var mapBackendNotification = (backendNotification) => {
+  let type = "GENERAL";
+  let entityType = null;
+  if (backendNotification.entityType) {
+    const backendEntityType = backendNotification.entityType.toUpperCase();
+    switch (backendEntityType) {
+      case "ACTIVITY" /* ACTIVITY */:
+        type = "ACTIVITY";
+        entityType = "ACTIVITY" /* ACTIVITY */;
+        break;
+      case "TRAIL" /* TRAIL */:
+        type = "TRAIL";
+        entityType = "TRAIL" /* TRAIL */;
+        break;
+      case "GOAL" /* GOAL */:
+        type = "GOAL";
+        entityType = "GOAL" /* GOAL */;
+        break;
+      default:
+        break;
+    }
+  }
+  return {
+    id: backendNotification.id,
+    title: backendNotification.title,
+    message: backendNotification.description,
+    type,
+    isRead: backendNotification.read,
+    createdAt: new Date(backendNotification.createdAt),
+    entityType,
+    entityId: backendNotification.entityId,
+    sender: backendNotification.sender,
+    activity: backendNotification.activity,
+    goal: backendNotification.goal
+  };
+};
+var groupNotificationsByTime = (notifications) => {
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1e3);
+  const sortDesc = (a, b) => +new Date(b.createdAt) - +new Date(a.createdAt);
+  const todayNotifications = notifications.filter((notification) => new Date(notification.createdAt) >= today).sort(sortDesc);
+  const lastWeekNotifications = notifications.filter(
+    (notification) => new Date(notification.createdAt) >= lastWeek && new Date(notification.createdAt) < today
+  ).sort(sortDesc);
+  const olderNotifications = notifications.filter((notification) => new Date(notification.createdAt) < lastWeek).sort(sortDesc);
+  const groups = [];
+  if (todayNotifications.length > 0) {
+    groups.push({
+      label: "Hoje",
+      notifications: todayNotifications
+    });
+  }
+  if (lastWeekNotifications.length > 0) {
+    groups.push({
+      label: "\xDAltima semana",
+      notifications: lastWeekNotifications
+    });
+  }
+  if (olderNotifications.length > 0) {
+    groups.push({
+      label: "Mais antigas",
+      notifications: olderNotifications
+    });
+  }
+  return groups;
+};
+var formatTimeAgo = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const diffInMs = now.getTime() - new Date(date).getTime();
+  const diffInHours = Math.floor(diffInMs / (1e3 * 60 * 60));
+  const diffInDays = Math.floor(diffInMs / (1e3 * 60 * 60 * 24));
+  if (diffInHours < 24) {
+    return `H\xE1 ${diffInHours}h`;
+  } else if (diffInDays < 30) {
+    const day = new Date(date).getDate();
+    const months = [
+      "Jan",
+      "Fev",
+      "Mar",
+      "Abr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Set",
+      "Out",
+      "Nov",
+      "Dez"
+    ];
+    const month = months[new Date(date).getMonth()];
+    return `${day} ${month}`;
+  }
+  return new Date(date).toLocaleDateString("pt-BR");
+};
+var createNotificationStore = (apiClient) => {
+  return (0, import_zustand8.create)()(
+    (0, import_middleware2.devtools)(
+      (set, get) => ({
+        // Initial state
+        notifications: [],
+        unreadCount: 0,
+        loading: false,
+        error: null,
+        hasMore: true,
+        currentPage: 1,
+        // Actions
+        fetchNotifications: async (params = {}) => {
+          set({ loading: true, error: null });
+          try {
+            const response = await apiClient.get(
+              "/notifications",
+              { params: { ...params } }
+            );
+            const mappedNotifications = response.data.notifications.map(
+              mapBackendNotification
+            );
+            const page = response.data.pagination.page;
+            const totalPages = response.data.pagination.totalPages;
+            const merged = params.page && params.page > 1 ? [...get().notifications, ...mappedNotifications] : mappedNotifications;
+            const deduped = Array.from(
+              new Map(merged.map((n) => [n.id, n])).values()
+            );
+            set({
+              notifications: deduped,
+              unreadCount: deduped.filter((n) => !n.isRead).length,
+              hasMore: page < totalPages,
+              currentPage: page,
+              loading: false
+            });
+          } catch (error) {
+            console.error("Error fetching notifications:", error);
+            set({
+              error: "Erro ao carregar notifica\xE7\xF5es",
+              loading: false
+            });
+          }
+        },
+        markAsRead: async (id) => {
+          const { notifications } = get();
+          const notification = notifications.find((n) => n.id === id);
+          if (notification?.isRead) {
+            return;
+          }
+          try {
+            await apiClient.patch(`/notifications/${id}`, { read: true });
+            const updatedNotifications = notifications.map(
+              (notification2) => notification2.id === id ? { ...notification2, isRead: true } : notification2
+            );
+            const unreadCount = updatedNotifications.filter(
+              (n) => !n.isRead
+            ).length;
+            set({
+              notifications: updatedNotifications,
+              unreadCount
+            });
+          } catch (error) {
+            console.error("Error marking notification as read:", error);
+            set({ error: "Erro ao marcar notifica\xE7\xE3o como lida" });
+          }
+        },
+        markAllAsRead: async () => {
+          const { notifications } = get();
+          try {
+            const unreadNotifications = notifications.filter((n) => !n.isRead);
+            await Promise.all(
+              unreadNotifications.map(
+                (notification) => apiClient.patch(`/notifications/${notification.id}`, {
+                  read: true
+                })
+              )
+            );
+            const updatedNotifications = notifications.map((notification) => ({
+              ...notification,
+              isRead: true
+            }));
+            set({
+              notifications: updatedNotifications,
+              unreadCount: 0
+            });
+          } catch (error) {
+            console.error("Error marking all notifications as read:", error);
+            set({ error: "Erro ao marcar todas as notifica\xE7\xF5es como lidas" });
+          }
+        },
+        deleteNotification: async (id) => {
+          const { notifications } = get();
+          try {
+            await apiClient.delete(`/notifications/${id}`);
+            const updatedNotifications = notifications.filter(
+              (notification) => notification.id !== id
+            );
+            const unreadCount = updatedNotifications.filter(
+              (n) => !n.isRead
+            ).length;
+            set({
+              notifications: updatedNotifications,
+              unreadCount
+            });
+          } catch (error) {
+            console.error("Error deleting notification:", error);
+            set({ error: "Erro ao deletar notifica\xE7\xE3o" });
+          }
+        },
+        clearNotifications: () => {
+          set({
+            notifications: [],
+            unreadCount: 0,
+            hasMore: false,
+            currentPage: 1
+          });
+        },
+        resetError: () => {
+          set({ error: null });
+        },
+        getGroupedNotifications: () => {
+          const { notifications } = get();
+          return groupNotificationsByTime(notifications);
+        }
+      }),
+      {
+        name: "notification-store"
+      }
+    )
+  );
+};
+
+// src/components/NotificationCard/NotificationCard.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
+var NotificationEmpty = ({
+  emptyStateImage,
+  emptyStateTitle = "Nenhuma notifica\xE7\xE3o no momento",
+  emptyStateDescription = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
+    emptyStateImage && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "img",
+      {
+        src: emptyStateImage,
+        alt: "Sem notifica\xE7\xF5es",
+        width: 82,
+        height: 82,
+        className: "object-contain"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
+  ] });
+};
+var NotificationHeader = ({
+  unreadCount,
+  variant = "modal"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
+    variant === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
+    unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "px-2 py-1 bg-info-100 text-info-700 text-xs rounded-full", children: [
+      unreadCount,
+      " n\xE3o lidas"
+    ] })
+  ] });
+};
 var SingleNotificationCard = ({
   title,
   message,
@@ -10349,7 +10628,7 @@ var NotificationList = ({
     ) });
   }
   if (!groupedNotifications || groupedNotifications.length === 0) {
-    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-text-400", children: "Nenhuma notifica\xE7\xE3o encontrada" }) });
+    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NotificationEmpty, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
@@ -10358,49 +10637,234 @@ var NotificationList = ({
       {
         title: notification.title,
         message: notification.message,
-        time: notification.time,
+        time: notification.time ?? formatTimeAgo(new Date(notification.createdAt)),
         isRead: notification.isRead,
         onMarkAsRead: () => onMarkAsReadById?.(notification.id),
         onDelete: () => onDeleteById?.(notification.id),
         onNavigate: notification.entityType && notification.entityId && onNavigateById ? () => onNavigateById(
-          notification.entityType,
-          notification.entityId
+          notification.entityType ?? void 0,
+          notification.entityId ?? void 0
         ) : void 0,
-        actionLabel: getActionLabel?.(notification.entityType)
+        actionLabel: getActionLabel?.(
+          notification.entityType ?? void 0
+        )
       },
       notification.id
     ))
   ] }, `${group.label}-${idx}`)) });
 };
-var NotificationCard = (props) => {
-  if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      NotificationList,
+var NotificationCenter = ({
+  isActive,
+  onToggleActive,
+  unreadCount = 0,
+  groupedNotifications = [],
+  loading = false,
+  error = null,
+  onRetry,
+  onMarkAsReadById,
+  onDeleteById,
+  onNavigateById,
+  getActionLabel,
+  onFetchNotifications,
+  onMarkAllAsRead,
+  emptyStateImage,
+  emptyStateTitle,
+  emptyStateDescription,
+  className
+}) => {
+  const { isMobile } = useMobile();
+  const [isModalOpen, setIsModalOpen] = (0, import_react30.useState)(false);
+  const handleMobileClick = () => {
+    setIsModalOpen(true);
+    onFetchNotifications?.();
+  };
+  const handleDesktopClick = () => {
+    onToggleActive?.();
+  };
+  (0, import_react30.useEffect)(() => {
+    if (isActive) {
+      onFetchNotifications?.();
+    }
+  }, [isActive, onFetchNotifications]);
+  const handleNavigate = (entityType, entityId, onCleanup) => {
+    onCleanup?.();
+    onNavigateById?.(entityType, entityId);
+  };
+  const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    NotificationEmpty,
+    {
+      emptyStateImage,
+      emptyStateTitle,
+      emptyStateDescription
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        IconButton_default,
+        {
+          active: isModalOpen,
+          onClick: handleMobileClick,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_phosphor_react21.Bell, { size: 24, className: "text-primary" }),
+          className
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        Modal_default,
+        {
+          isOpen: isModalOpen,
+          onClose: () => setIsModalOpen(false),
+          title: "Notifica\xE7\xF5es",
+          size: "md",
+          hideCloseButton: false,
+          closeOnBackdropClick: true,
+          closeOnEscape: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "px-0 pb-3 border-b border-border-200", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NotificationHeader, { unreadCount, variant: "modal" }),
+              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onMarkAllAsRead,
+                  className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+                  children: "Marcar todas como lidas"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              NotificationList,
+              {
+                groupedNotifications,
+                loading,
+                error,
+                onRetry,
+                onMarkAsReadById,
+                onDeleteById,
+                onNavigateById: (entityType, entityId) => handleNavigate(
+                  entityType,
+                  entityId,
+                  () => setIsModalOpen(false)
+                ),
+                getActionLabel,
+                renderEmpty: renderEmptyState
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DropdownMenu_default, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      IconButton_default,
       {
-        ...props,
-        groupedNotifications: props.groupedNotifications ?? (props.notifications ? [{ label: "Notifica\xE7\xF5es", notifications: props.notifications }] : [])
+        active: isActive,
+        onClick: handleDesktopClick,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_phosphor_react21.Bell,
+          {
+            size: 24,
+            className: isActive ? "text-primary-950" : "text-primary"
+          }
+        ),
+        className
       }
-    );
-  }
-  if (props.title !== void 0 && props.message !== void 0 && props.time !== void 0 && props.isRead !== void 0 && props.onMarkAsRead && props.onDelete) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      SingleNotificationCard,
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      DropdownMenuContent,
       {
-        title: props.title,
-        message: props.message,
-        time: props.time,
-        isRead: props.isRead,
-        onMarkAsRead: props.onMarkAsRead,
-        onDelete: props.onDelete,
-        onNavigate: props.onNavigate,
-        actionLabel: props.actionLabel,
-        className: props.className
+        className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
+        side: "bottom",
+        align: "end",
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "px-4 py-3 border-b border-border-200", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              NotificationHeader,
+              {
+                unreadCount,
+                variant: "dropdown"
+              }
+            ),
+            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onMarkAllAsRead,
+                className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+                children: "Marcar todas como lidas"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            NotificationList,
+            {
+              groupedNotifications,
+              loading,
+              error,
+              onRetry,
+              onMarkAsReadById,
+              onDeleteById,
+              onNavigateById: (entityType, entityId) => handleNavigate(entityType, entityId, onToggleActive),
+              getActionLabel,
+              renderEmpty: renderEmptyState
+            }
+          ) })
+        ] })
       }
-    );
+    )
+  ] });
+};
+var NotificationCard = (props) => {
+  switch (props.mode) {
+    case "single":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SingleNotificationCard,
+        {
+          title: props.title,
+          message: props.message,
+          time: props.time,
+          isRead: props.isRead,
+          onMarkAsRead: props.onMarkAsRead,
+          onDelete: props.onDelete,
+          onNavigate: props.onNavigate,
+          actionLabel: props.actionLabel,
+          className: props.className
+        }
+      );
+    case "list":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        NotificationList,
+        {
+          groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
+            {
+              label: "Notifica\xE7\xF5es",
+              notifications: props.notifications
+            }
+          ] : []),
+          loading: props.loading,
+          error: props.error,
+          onRetry: props.onRetry,
+          onMarkAsReadById: props.onMarkAsReadById,
+          onDeleteById: props.onDeleteById,
+          onNavigateById: props.onNavigateById,
+          getActionLabel: props.getActionLabel,
+          renderEmpty: props.renderEmpty,
+          className: props.className
+        }
+      );
+    case "center":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NotificationCenter, { ...props });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
 };
 var NotificationCard_default = NotificationCard;
+
+// src/hooks/useNotificationStore.ts
+var createUseNotificationStore = (apiClient) => {
+  return createNotificationStore(apiClient);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ANSWER_STATUS,
@@ -10448,6 +10912,7 @@ var NotificationCard_default = NotificationCard;
   NavButton,
   NotFound,
   NotificationCard,
+  NotificationEntityType,
   ProfileMenuFooter,
   ProfileMenuHeader,
   ProfileMenuSection,
@@ -10504,7 +10969,10 @@ var NotificationCard_default = NotificationCard;
   Toaster,
   VideoPlayer,
   Whiteboard,
+  createNotificationStore,
+  createUseNotificationStore,
   createZustandAuthAdapter,
+  formatTimeAgo,
   getDeviceType,
   getRootDomain,
   getStatusBadge,