@greatapps/common 1.1.71 → 1.1.75

package/dist/components/layouts/AppNavBar.mjs

@@ -17,7 +17,6 @@ function AppNavBar({
   onExpandClick,
   menuItems = [],
   onCreditsClick,
-  notifications,
   onNotificationsViewAll
 }) {
   const router = useRouter();
@@ -53,7 +52,6 @@ function AppNavBar({
         /* @__PURE__ */ jsx(
           NotificationsPopover,
           {
-            notifications,
             onViewAll: onNotificationsViewAll
           }
         ),

package/dist/components/layouts/AppNavBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["'use client';\n\nimport Image from 'next/image';\nimport { useRouter } from 'next/navigation';\nimport { NavBar } from './NavBar';\nimport { ProfilePopover } from './ProfilePopover';\nimport { NotificationsPopover } from './NotificationsPopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\nimport type { NotificationData } from './NotificationsPopover';\n\nexport interface AppNavBarProps {\n  onLogoClick?: () => void;\n  logoIndicatorClassName?: string;\n  appIconHref?: string;\n  appIconActive?: boolean;\n  /** Controls the left-side indicator bar on the app icon (opacity transition) */\n  appIconIndicator?: boolean;\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n  notifications?: NotificationData[];\n  onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  logoIndicatorClassName,\n  appIconHref = '/',\n  appIconActive = false,\n  appIconIndicator = false,\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onCreditsClick,\n  notifications,\n  onNotificationsViewAll,\n}: AppNavBarProps) {\n  const router = useRouter();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogoClick = onLogoClick ?? (() => router.push('/'));\n  const handleAppIconClick = () => router.push(appIconHref);\n\n  return (\n    <NavBar\n      onLogoClick={handleLogoClick}\n      logoIndicatorClassName={logoIndicatorClassName}\n      showExpandButton={showExpandButton}\n      onExpandClick={onExpandClick}\n      appIconSlot={\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={handleAppIconClick}>\n              <div\n                className={`size-10 flex items-center justify-center rounded-lg hover:bg-pages-100 cursor-pointer transition-colors duration-300 ${\n                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n                }`}\n              >\n                <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">GreatPages</TooltipContent>\n          </Tooltip>\n          <div\n            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-300 rounded-r-xl transition-opacity duration-300 ${\n              appIconIndicator ? 'opacity-100' : 'opacity-0'\n            }`}\n          />\n        </div>\n      }\n    >\n      <NotificationsPopover\n        notifications={notifications}\n        onViewAll={onNotificationsViewAll}\n      />\n      <ProfilePopover\n        onEditProfile={() => openConfigurations()}\n        onCreditsClick={onCreditsClick}\n        menuItems={menuItems}\n      />\n    </NavBar>\n  );\n}\n"],"mappings":";AAsDU,SAOM,KAPN;AApDV,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,wBAAwB;AAmB1B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,aACE,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MAAC,SAAS,oBAC/B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,wHACT,gBAAgB,iBAAiB,aACnC;AAAA,cAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC9E,GACF;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,WACzC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,mHACT,mBAAmB,gBAAgB,WACrC;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAGF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAe,MAAM,mBAAmB;AAAA,YACxC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["'use client';\n\nimport Image from 'next/image';\nimport { useRouter } from 'next/navigation';\nimport { NavBar } from './NavBar';\nimport { ProfilePopover } from './ProfilePopover';\nimport { NotificationsPopover } from './NotificationsPopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppNavBarProps {\n  onLogoClick?: () => void;\n  logoIndicatorClassName?: string;\n  appIconHref?: string;\n  appIconActive?: boolean;\n  /** Controls the left-side indicator bar on the app icon (opacity transition) */\n  appIconIndicator?: boolean;\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n  onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  logoIndicatorClassName,\n  appIconHref = '/',\n  appIconActive = false,\n  appIconIndicator = false,\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onCreditsClick,\n  onNotificationsViewAll,\n}: AppNavBarProps) {\n  const router = useRouter();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogoClick = onLogoClick ?? (() => router.push('/'));\n  const handleAppIconClick = () => router.push(appIconHref);\n\n  return (\n    <NavBar\n      onLogoClick={handleLogoClick}\n      logoIndicatorClassName={logoIndicatorClassName}\n      showExpandButton={showExpandButton}\n      onExpandClick={onExpandClick}\n      appIconSlot={\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={handleAppIconClick}>\n              <div\n                className={`size-10 flex items-center justify-center rounded-lg hover:bg-pages-100 cursor-pointer transition-colors duration-300 ${\n                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n                }`}\n              >\n                <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">GreatPages</TooltipContent>\n          </Tooltip>\n          <div\n            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-300 rounded-r-xl transition-opacity duration-300 ${\n              appIconIndicator ? 'opacity-100' : 'opacity-0'\n            }`}\n          />\n        </div>\n      }\n    >\n      <NotificationsPopover\n        onViewAll={onNotificationsViewAll}\n      />\n      <ProfilePopover\n        onEditProfile={() => openConfigurations()}\n        onCreditsClick={onCreditsClick}\n        menuItems={menuItems}\n      />\n    </NavBar>\n  );\n}\n"],"mappings":";AAmDU,SAOM,KAPN;AAjDV,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,wBAAwB;AAiB1B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,aACE,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MAAC,SAAS,oBAC/B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,wHACT,gBAAgB,iBAAiB,aACnC;AAAA,cAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC9E,GACF;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,WACzC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,mHACT,mBAAmB,gBAAgB,WACrC;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAGF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAe,MAAM,mBAAmB;AAAA,YACxC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/layouts/NotificationsPopover.mjs

@@ -5,10 +5,12 @@ import { Bell } from "lucide-react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
 import { Button } from "../ui/buttons/Button";
-import { NotificationItem } from "./NotificationItem";
+import NotificationCard from "../widgets/notifications/NotificationCard";
 import { cn } from "../../infra/utils/clsx";
+import { useMessages, useMarkAllMessagesAsRead } from "../../modules/users/hooks/messages.hook";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
 function NotificationsPopover({
-  notifications = [],
   onViewAll,
   side,
   align,
@@ -16,10 +18,15 @@ function NotificationsPopover({
   badgeClassName = "bg-pages-400"
 }) {
   const [open, setOpen] = useState(false);
-  const [hasNewNotifications, setHasNewNotifications] = useState(true);
+  const { data: messagesData } = useMessages({ limit: 5 });
+  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
+  const messages = messagesData?.data ?? [];
+  const totalUnread = messagesData?.totalUnread ?? 0;
   const handleOpenChange = (isOpen) => {
     setOpen(isOpen);
-    if (isOpen) setHasNewNotifications(false);
+    if (isOpen && totalUnread > 0) {
+      markAllAsRead();
+    }
   };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs(
@@ -28,7 +35,7 @@ function NotificationsPopover({
         className: `relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-gray-500" }),
-          hasNewNotifications && /* @__PURE__ */ jsx(
+          totalUnread > 0 && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
@@ -44,7 +51,7 @@ function NotificationsPopover({
       PopoverPrimitive.Content,
       {
         className: cn(
-          "absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
+          "absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
           contentClassName
         ),
         side,
@@ -52,16 +59,19 @@ function NotificationsPopover({
         sideOffset: 8,
         children: [
           /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 px-4", children: "\xDAltimas notifica\xE7\xF5es" }),
-          notifications.length > 0 ? notifications.map((notification, index) => /* @__PURE__ */ jsx(
-            NotificationItem,
+          messages.length > 0 ? messages.map((message, index) => /* @__PURE__ */ jsx(
+            NotificationCard,
             {
-              icon: notification.icon,
-              iconBgColor: notification.iconBgColor,
-              title: notification.title,
-              time: notification.time,
-              showBorder: index < notifications.length - 1
+              icon: /* @__PURE__ */ jsx(Bell, { size: 16 }),
+              iconBgColor: "bg-gray-100",
+              title: message.subject,
+              time: formatDistanceToNow(new Date(message.datetime_add), {
+                addSuffix: true,
+                locale: ptBR
+              }),
+              showBorder: index < messages.length - 1
             },
-            index
+            message.id
           )) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]", children: [
             /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md p-2.5", children: /* @__PURE__ */ jsx(Bell, { size: 20, color: "var(--color-gray-950)" }) }),
             /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-950", children: "Sem notifica\xE7\xF5es por enquanto" })

package/dist/components/layouts/NotificationsPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useState } from \"react\";\r\nimport { Bell } from \"lucide-react\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { Popover } from \"../ui/overlay/Popover\";\r\nimport { Button } from \"../ui/buttons/Button\";\r\nimport { NotificationItem } from \"./NotificationItem\";\r\nimport { cn } from \"../../infra/utils/clsx\";\r\n\r\nexport interface NotificationData {\r\n  icon: ReactNode;\r\n  iconBgColor: string;\r\n  title: string;\r\n  time: string;\r\n}\r\n\r\nexport interface NotificationsPopoverProps {\r\n  notifications?: NotificationData[];\r\n  onViewAll?: () => void;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  align?: \"start\" | \"center\" | \"end\";\r\n  contentClassName?: string;\r\n  badgeClassName?: string;\r\n}\r\n\r\nfunction NotificationsPopover({\r\n  notifications = [],\r\n  onViewAll,\r\n  side,\r\n  align,\r\n  contentClassName,\r\n  badgeClassName = \"bg-pages-400\",\r\n}: NotificationsPopoverProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const [hasNewNotifications, setHasNewNotifications] = useState(true);\r\n\r\n  const handleOpenChange = (isOpen: boolean) => {\r\n    setOpen(isOpen);\r\n    if (isOpen) setHasNewNotifications(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={open} onOpenChange={handleOpenChange}>\r\n      <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n        <div\r\n          className={`relative rounded-full p-2.5 ${open ? \"bg-gray-100\" : \"hover:bg-gray-100\"}`}\r\n        >\r\n          <Bell size={20} className=\"text-gray-500\" />\r\n          {hasNewNotifications && (\r\n            <span\r\n              className={cn(\r\n                \"absolute top-2 right-2 size-2.5 rounded-full\",\r\n                badgeClassName,\r\n              )}\r\n            />\r\n          )}\r\n        </div>\r\n      </PopoverPrimitive.Trigger>\r\n      <PopoverPrimitive.Portal>\r\n        <PopoverPrimitive.Content\r\n          className={cn(\r\n            \"absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200\",\r\n            contentClassName,\r\n          )}\r\n          side={side}\r\n          align={align}\r\n          sideOffset={8}\r\n        >\r\n          <span className=\"paragraph-small-semibold text-gray-950 px-4\">\r\n            Últimas notificações\r\n          </span>\r\n\r\n          {notifications.length > 0 ? (\r\n            notifications.map((notification, index) => (\r\n              <NotificationItem\r\n                key={index}\r\n                icon={notification.icon}\r\n                iconBgColor={notification.iconBgColor}\r\n                title={notification.title}\r\n                time={notification.time}\r\n                showBorder={index < notifications.length - 1}\r\n              />\r\n            ))\r\n          ) : (\r\n            <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\r\n              <div className=\"bg-gray-50 rounded-md p-2.5\">\r\n                <Bell size={20} color=\"var(--color-gray-950)\" />\r\n              </div>\r\n              <span className=\"paragraph-small-medium text-gray-950\">\r\n                Sem notificações por enquanto\r\n              </span>\r\n            </div>\r\n          )}\r\n\r\n          {onViewAll && (\r\n            <Button\r\n              variant=\"secondary\"\r\n              className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\r\n              onClick={onViewAll}\r\n            >\r\n              Todas as notificações\r\n            </Button>\r\n          )}\r\n        </PopoverPrimitive.Content>\r\n      </PopoverPrimitive.Portal>\r\n    </Popover>\r\n  );\r\n}\r\n\r\nexport { NotificationsPopover };\r\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAoB,gBAAgB;AACpC,SAAS,YAAY;AACrB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAkBnB,SAAS,qBAAqB;AAAA,EAC5B,gBAAgB,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,IAAI;AAEnE,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,OAAQ,wBAAuB,KAAK;AAAA,EAC1C;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,iBAAgB;AAAA,UACzC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAE9D;AAAA,UAEC,cAAc,SAAS,IACtB,cAAc,IAAI,CAAC,cAAc,UAC/B;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,OAAO,aAAa;AAAA,cACpB,MAAM,aAAa;AAAA,cACnB,YAAY,QAAQ,cAAc,SAAS;AAAA;AAAA,YALtC;AAAA,UAMP,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,QAAK,MAAM,IAAI,OAAM,yBAAwB,GAChD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAEvD;AAAA,aACF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { Bell } from \"lucide-react\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { Popover } from \"../ui/overlay/Popover\";\r\nimport { Button } from \"../ui/buttons/Button\";\r\nimport NotificationCard from \"../widgets/notifications/NotificationCard\";\r\nimport { cn } from \"../../infra/utils/clsx\";\r\nimport { useMessages, useMarkAllMessagesAsRead } from \"../../modules/users/hooks/messages.hook\";\r\nimport { formatDistanceToNow } from \"date-fns\";\r\nimport { ptBR } from \"date-fns/locale\";\r\n\r\nexport interface NotificationsPopoverProps {\r\n  onViewAll?: () => void;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  align?: \"start\" | \"center\" | \"end\";\r\n  contentClassName?: string;\r\n  badgeClassName?: string;\r\n}\r\n\r\nfunction NotificationsPopover({\r\n  onViewAll,\r\n  side,\r\n  align,\r\n  contentClassName,\r\n  badgeClassName = \"bg-pages-400\",\r\n}: NotificationsPopoverProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const { data: messagesData } = useMessages({ limit: 5 });\r\n  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();\r\n\r\n  const messages = messagesData?.data ?? [];\r\n  const totalUnread = messagesData?.totalUnread ?? 0;\r\n\r\n  const handleOpenChange = (isOpen: boolean) => {\r\n    setOpen(isOpen);\r\n    if (isOpen && totalUnread > 0) {\r\n      markAllAsRead();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Popover open={open} onOpenChange={handleOpenChange}>\r\n      <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n        <div\r\n          className={`relative rounded-full p-2.5 ${open ? \"bg-gray-100\" : \"hover:bg-gray-100\"}`}\r\n        >\r\n          <Bell size={20} className=\"text-gray-500\" />\r\n          {totalUnread > 0 && (\r\n            <span\r\n              className={cn(\r\n                \"absolute top-2 right-2 size-2.5 rounded-full\",\r\n                badgeClassName,\r\n              )}\r\n            />\r\n          )}\r\n        </div>\r\n      </PopoverPrimitive.Trigger>\r\n      <PopoverPrimitive.Portal>\r\n        <PopoverPrimitive.Content\r\n          className={cn(\r\n            \"absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200\",\r\n            contentClassName,\r\n          )}\r\n          side={side}\r\n          align={align}\r\n          sideOffset={8}\r\n        >\r\n          <span className=\"paragraph-small-semibold text-gray-950 px-4\">\r\n            Últimas notificações\r\n          </span>\r\n\r\n          {messages.length > 0 ? (\r\n            messages.map((message, index) => (\r\n              <NotificationCard\r\n                key={message.id}\r\n                icon={<Bell size={16} />}\r\n                iconBgColor=\"bg-gray-100\"\r\n                title={message.subject}\r\n                time={formatDistanceToNow(new Date(message.datetime_add), {\r\n                  addSuffix: true,\r\n                  locale: ptBR,\r\n                })}\r\n                showBorder={index < messages.length - 1}\r\n              />\r\n            ))\r\n          ) : (\r\n            <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\r\n              <div className=\"bg-gray-50 rounded-md p-2.5\">\r\n                <Bell size={20} color=\"var(--color-gray-950)\" />\r\n              </div>\r\n              <span className=\"paragraph-small-medium text-gray-950\">\r\n                Sem notificações por enquanto\r\n              </span>\r\n            </div>\r\n          )}\r\n\r\n          {onViewAll && (\r\n            <Button\r\n              variant=\"secondary\"\r\n              className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\r\n              onClick={onViewAll}\r\n            >\r\n              Todas as notificações\r\n            </Button>\r\n          )}\r\n        </PopoverPrimitive.Content>\r\n      </PopoverPrimitive.Portal>\r\n    </Popover>\r\n  );\r\n}\r\n\r\nexport { NotificationsPopover };\r\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa,gCAAgC;AACtD,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,EAAE,MAAM,aAAa,IAAI,YAAY,EAAE,OAAO,EAAE,CAAC;AACvD,QAAM,EAAE,QAAQ,cAAc,IAAI,yBAAyB;AAE3D,QAAM,WAAW,cAAc,QAAQ,CAAC;AACxC,QAAM,cAAc,cAAc,eAAe;AAEjD,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,UAAU,cAAc,GAAG;AAC7B,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,iBAAgB;AAAA,UACzC,cAAc,KACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAE9D;AAAA,UAEC,SAAS,SAAS,IACjB,SAAS,IAAI,CAAC,SAAS,UACrB;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,oBAAC,QAAK,MAAM,IAAI;AAAA,cACtB,aAAY;AAAA,cACZ,OAAO,QAAQ;AAAA,cACf,MAAM,oBAAoB,IAAI,KAAK,QAAQ,YAAY,GAAG;AAAA,gBACxD,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,CAAC;AAAA,cACD,YAAY,QAAQ,SAAS,SAAS;AAAA;AAAA,YARjC,QAAQ;AAAA,UASf,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,QAAK,MAAM,IAAI,OAAM,yBAAwB,GAChD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAEvD;AAAA,aACF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/pages/notifications/Notifications.mjs

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bell, Check } from "lucide-react";
+import { Button } from "../../ui/buttons/Button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "../../ui/data-display/Tabs";
+import { useMessages } from "../../../modules/users/hooks/messages.hook";
+import NotificationCard from "../../widgets/notifications/NotificationCard";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+function Notifications() {
+  const { data: unreadedNotifications } = useMessages({
+    page: 1,
+    limit: 10,
+    status: 1,
+    type: "notification",
+    order: "desc"
+  });
+  const { data: allNotifications } = useMessages({
+    page: 1,
+    limit: 10,
+    type: "notification",
+    order: "desc"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("h1", { className: "paragraph-xlarge-semibold lg:title-large-semibold text-gray-950", children: "Notifica\xE7\xF5es" }),
+        /* @__PURE__ */ jsx("p", { className: "paragraph-medium-regular text-gray-600 hidden lg:block", children: "Tenha controle total sobre p\xE1ginas, experi\xEAncias e convers\xF5es." })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", className: "h-10! lg:h-12! shrink-0", children: [
+        /* @__PURE__ */ jsx(Check, { size: 20 }),
+        /* @__PURE__ */ jsx("span", { className: "lg:block hidden", children: "Marcar todos como lidos" }),
+        /* @__PURE__ */ jsx("span", { className: "lg:hidden", children: "Marcar como lidos" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        defaultValue: "all",
+        className: "flex flex-col w-full bg-transparent gap-6 lg:gap-8",
+        children: [
+          /* @__PURE__ */ jsxs(TabsList, { className: "h-auto pb-0 bg-transparent", children: [
+            /* @__PURE__ */ jsxs(TabsTrigger, { className: "gap-2", value: "all", children: [
+              "Todas as notifica\xE7\xF5es",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+                "(",
+                allNotifications?.data.length,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { className: "gap-2", value: "unreads", children: [
+              "N\xE3o lidas",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+                "(",
+                unreadedNotifications?.data.length,
+                ")"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "all", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col border border-gray-200 rounded-lg w-full bg-white", children: allNotifications?.data.map((notification, index) => /* @__PURE__ */ jsx(
+            NotificationCard,
+            {
+              icon: /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-pages-600" }),
+              iconBgColor: "bg-pages-100",
+              title: notification.subject,
+              description: notification.message,
+              time: formatDistanceToNow(new Date(notification.datetime_add), {
+                addSuffix: true,
+                locale: ptBR
+              }),
+              isUnread: notification.status === 1,
+              showBorder: index < allNotifications.data.length - 1
+            },
+            notification.id
+          )) }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "unreads", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col border border-gray-200 rounded-lg w-full bg-white", children: unreadedNotifications?.data.map((notification, index) => /* @__PURE__ */ jsx(
+            NotificationCard,
+            {
+              icon: /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-pages-600" }),
+              iconBgColor: "bg-pages-100",
+              title: notification.subject,
+              description: notification.message,
+              time: formatDistanceToNow(new Date(notification.datetime_add), {
+                addSuffix: true,
+                locale: ptBR
+              }),
+              isUnread: notification.status === 1,
+              showBorder: index < unreadedNotifications.data.length - 1
+            },
+            notification.id
+          )) }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Notifications
+};
+//# sourceMappingURL=Notifications.mjs.map

package/dist/components/pages/notifications/Notifications.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/pages/notifications/Notifications.tsx"],"sourcesContent":["import { Bell, Check } from \"lucide-react\";\nimport { Button } from \"../../ui/buttons/Button\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"../../ui/data-display/Tabs\";\nimport { useMessages } from \"../../../modules/users/hooks/messages.hook\";\nimport NotificationCard from \"../../widgets/notifications/NotificationCard\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\n\nexport function Notifications() {\n  const { data: unreadedNotifications } = useMessages({\n    page: 1,\n    limit: 10,\n    status: 1,\n    type: \"notification\",\n    order: \"desc\",\n  });\n  const { data: allNotifications } = useMessages({\n    page: 1,\n    limit: 10,\n    type: \"notification\",\n    order: \"desc\",\n  });\n  return (\n    <div className=\"flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"paragraph-xlarge-semibold lg:title-large-semibold text-gray-950\">\n            Notificações\n          </h1>\n          <p className=\"paragraph-medium-regular text-gray-600 hidden lg:block\">\n            Tenha controle total sobre páginas, experiências e conversões.\n          </p>\n        </div>\n        <Button variant={\"secondary\"} className=\"h-10! lg:h-12! shrink-0\">\n          <Check size={20} />\n          <span className=\"lg:block hidden\">Marcar todos como lidos</span>\n          <span className=\"lg:hidden\">Marcar como lidos</span>\n        </Button>\n      </div>\n      <Tabs\n        defaultValue=\"all\"\n        className=\"flex flex-col w-full bg-transparent gap-6 lg:gap-8\"\n      >\n        <TabsList className=\"h-auto pb-0 bg-transparent\">\n          <TabsTrigger className=\"gap-2\" value=\"all\">\n            Todas as notificações{\" \"}\n            <span className=\"text-gray-500\">\n              ({allNotifications?.data.length})\n            </span>\n          </TabsTrigger>\n          <TabsTrigger className=\"gap-2\" value=\"unreads\">\n            Não lidas{\" \"}\n            <span className=\"text-gray-500\">\n              ({unreadedNotifications?.data.length})\n            </span>\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"all\">\n          <div className=\"flex flex-col border border-gray-200 rounded-lg w-full bg-white\">\n            {allNotifications?.data.map((notification, index) => (\n              <NotificationCard\n                key={notification.id}\n                icon={<Bell size={20} className=\"text-pages-600\" />}\n                iconBgColor=\"bg-pages-100\"\n                title={notification.subject}\n                description={notification.message}\n                time={formatDistanceToNow(new Date(notification.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                isUnread={notification.status === 1}\n                showBorder={index < allNotifications.data.length - 1}\n              />\n            ))}\n          </div>\n        </TabsContent>\n\n        <TabsContent value=\"unreads\">\n          <div className=\"flex flex-col border border-gray-200 rounded-lg w-full bg-white\">\n            {unreadedNotifications?.data.map((notification, index) => (\n              <NotificationCard\n                key={notification.id}\n                icon={<Bell size={20} className=\"text-pages-600\" />}\n                iconBgColor=\"bg-pages-100\"\n                title={notification.subject}\n                description={notification.message}\n                time={formatDistanceToNow(new Date(notification.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                isUnread={notification.status === 1}\n                showBorder={index < unreadedNotifications.data.length - 1}\n              />\n            ))}\n          </div>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/widgets/notifications/NotificationCard.mjs

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
+import { cn } from "../../../infra/utils/clsx";
+function NotificationCard({
+  icon,
+  iconBgColor,
+  title,
+  description,
+  time,
+  actions,
+  isUnread = false,
+  showBorder = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col lg:flex-row items-start p-4 lg:p-6 gap-4 lg:gap-5 relative",
+        showBorder && "border-b border-gray-200",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center size-10 rounded-full shrink-0",
+              iconBgColor
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Clock, { size: 14, className: "text-gray-400" }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-gray-600", children: time })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
+        ] }),
+        isUnread && /* @__PURE__ */ jsx("div", { className: "size-2 bg-pages-400 rounded-full shrink-0 mt-1" })
+      ]
+    }
+  );
+}
+export {
+  NotificationCard as default
+};
+//# sourceMappingURL=NotificationCard.mjs.map

package/dist/components/widgets/notifications/NotificationCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/widgets/notifications/NotificationCard.tsx"],"sourcesContent":["import { Clock } from 'lucide-react';\r\nimport { ReactNode } from 'react';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\ntype NotificationCardProps = {\r\n  icon: ReactNode;\r\n  iconBgColor?: string;\r\n  title: string;\r\n  description?: string;\r\n  time: string;\r\n  actions?: ReactNode;\r\n  isUnread?: boolean;\r\n  showBorder?: boolean;\r\n  className?: string;\r\n};\r\n\r\nexport default function NotificationCard({\r\n  icon,\r\n  iconBgColor,\r\n  title,\r\n  description,\r\n  time,\r\n  actions,\r\n  isUnread = false,\r\n  showBorder = true,\r\n  className,\r\n}: NotificationCardProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'flex flex-col lg:flex-row items-start p-4 lg:p-6 gap-4 lg:gap-5 relative',\r\n        showBorder && 'border-b border-gray-200',\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        className={cn(\r\n          'flex items-center justify-center size-10 rounded-full shrink-0',\r\n          iconBgColor\r\n        )}\r\n      >\r\n        {icon}\r\n      </div>\r\n\r\n      <div className=\"flex flex-col gap-4 flex-1\">\r\n        <div className=\"flex flex-col gap-1\">\r\n          <span className=\"paragraph-small-semibold text-gray-950\">{title}</span>\r\n          {description && (\r\n            <span className=\"paragraph-small-regular text-gray-600\">{description}</span>\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"flex items-center gap-1.5\">\r\n          <Clock size={14} className=\"text-gray-400\" />\r\n          <span className=\"paragraph-xsmall-medium text-gray-600\">{time}</span>\r\n        </div>\r\n\r\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\r\n      </div>\r\n\r\n      {isUnread && <div className=\"size-2 bg-pages-400 rounded-full shrink-0 mt-1\" />}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport type { NotificationCardProps };\r\n"],"mappings":"AAmCM,cAUE,YAVF;AAnCN,SAAS,aAAa;AAEtB,SAAS,UAAU;AAcJ,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,+BAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,YAC/D,eACC,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,aAEzE;AAAA,UAEA,qBAAC,SAAI,WAAU,6BACb;AAAA,gCAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB;AAAA,YAC3C,oBAAC,UAAK,WAAU,yCAAyC,gBAAK;AAAA,aAChE;AAAA,UAEC,WAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,WAChE;AAAA,QAEC,YAAY,oBAAC,SAAI,WAAU,kDAAiD;AAAA;AAAA;AAAA,EAC/E;AAEJ;","names":[]}