@greatapps/common 1.1.218 → 1.1.221

package/src/components/layouts/NotificationsPopover.tsx

@@ -1,115 +1,115 @@
-"use client";
-
-import { useState } from "react";
-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 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";
-
-export interface NotificationsPopoverProps {
-  onViewAll?: () => void;
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-  badgeClassName?: string;
-}
-
-function NotificationsPopover({
-  onViewAll,
-  side,
-  align,
-  contentClassName,
-  badgeClassName = "bg-pages-400",
-}: NotificationsPopoverProps) {
-  const [open, setOpen] = useState(false);
-  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });
-  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
-
-  const messages = messagesData?.data ?? [];
-  const totalUnread = messagesData?.totalUnread ?? 0;
-
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
-    if (isOpen && totalUnread > 0) {
-      markAllAsRead();
-    }
-  };
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverPrimitive.Trigger className="cursor-pointer">
-        <div
-          className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
-        >
-          <Bell size={20} className="text-gray-500" />
-          {totalUnread > 0 && (
-            <span
-              className={cn(
-                "absolute top-2 right-2 size-2.5 rounded-full",
-                badgeClassName,
-              )}
-            />
-          )}
-        </div>
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          className={cn(
-            "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={side}
-          align={align}
-          sideOffset={8}
-        >
-          <span className="paragraph-small-semibold text-gray-950 px-4">
-            Últimas notificações
-          </span>
-
-          {messages.length > 0 ? (
-            messages.map((message, index) => (
-              <NotificationCard
-                key={message.id}
-                icon={<Bell size={16} />}
-                iconBgColor="bg-gray-100"
-                title={message.subject}
-                time={formatDistanceToNow(new Date(message.datetime_add), {
-                  addSuffix: true,
-                  locale: ptBR,
-                })}
-                gapPx={6}
-                showBorder={index < messages.length - 1}
-              />
-            ))
-          ) : (
-            <div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
-              <div className="bg-gray-50 rounded-md p-2.5">
-                <Bell size={20} color="var(--color-gray-950)" />
-              </div>
-              <span className="paragraph-small-medium text-gray-950">
-                Sem notificações por enquanto
-              </span>
-            </div>
-          )}
-
-          {onViewAll && (
-            <Button
-              variant="secondary"
-              className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
-              onClick={onViewAll}
-            >
-              Todas as notificações
-            </Button>
-          )}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </Popover>
-  );
-}
-
-export { NotificationsPopover };
+"use client";
+
+import { useState } from "react";
+import { IconBell } from '@tabler/icons-react';
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+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";
+
+export interface NotificationsPopoverProps {
+  onViewAll?: () => void;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+  badgeClassName?: string;
+}
+
+function NotificationsPopover({
+  onViewAll,
+  side,
+  align,
+  contentClassName,
+  badgeClassName = "bg-pages-400",
+}: NotificationsPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });
+  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
+
+  const messages = messagesData?.data ?? [];
+  const totalUnread = messagesData?.totalUnread ?? 0;
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen && totalUnread > 0) {
+      markAllAsRead();
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverPrimitive.Trigger className="cursor-pointer">
+        <div
+          className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
+        >
+          <IconBell size={20} className="text-gray-500" />
+          {totalUnread > 0 && (
+            <span
+              className={cn(
+                "absolute top-2 right-2 size-2.5 rounded-full",
+                badgeClassName,
+              )}
+            />
+          )}
+        </div>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          className={cn(
+            "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={side}
+          align={align}
+          sideOffset={8}
+        >
+          <span className="paragraph-small-semibold text-gray-950 px-4">
+            Últimas notificações
+          </span>
+
+          {messages.length > 0 ? (
+            messages.map((message, index) => (
+              <NotificationCard
+                key={message.id}
+                icon={<IconBell size={16} />}
+                iconBgColor="bg-gray-100"
+                title={message.subject}
+                time={formatDistanceToNow(new Date(message.datetime_add), {
+                  addSuffix: true,
+                  locale: ptBR,
+                })}
+                gapPx={6}
+                showBorder={index < messages.length - 1}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
+              <div className="bg-gray-50 rounded-md p-2.5">
+                <IconBell size={20} color="var(--color-gray-950)" />
+              </div>
+              <span className="paragraph-small-medium text-gray-950">
+                Sem notificações por enquanto
+              </span>
+            </div>
+          )}
+
+          {onViewAll && (
+            <Button
+              variant="secondary"
+              className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
+              onClick={onViewAll}
+            >
+              Todas as notificações
+            </Button>
+          )}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </Popover>
+  );
+}
+
+export { NotificationsPopover };

package/src/components/layouts/ProfilePopover.tsx

@@ -1,184 +1,179 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Popover } from "../ui/overlay/Popover";
-import { Progress } from "../ui/feedback/Progress";
-import { Separator } from "../ui/data-display/Separator";
-import { Settings } from "lucide-react";
-import { NavBarItem } from "./NavBarItem";
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
-import { useAuth } from "../../providers/auth.provider";
-import { cn } from "../../infra/utils/clsx";
-import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
-
-export interface ProfileMenuItem {
-  icon?: React.ReactNode;
-  label: string;
-  onClick: () => void;
-}
-
-export interface ProfilePopoverProps {
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-  onEditProfile?: () => void;
-  onCreditsClick?: () => void;
-  menuItems?: ProfileMenuItem[];
-  logoutRedirect?: string;
-}
-
-function ProfilePopover({
-  side = "top",
-  align = "start",
-  contentClassName = "absolute bottom-2 left-[26px]",
-  onEditProfile,
-  onCreditsClick,
-  menuItems = [],
-  logoutRedirect = "/login",
-}: ProfilePopoverProps) {
-  const router = useRouter();
-  const { user, logout } = useAuth();
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-
-  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
-    useIaCredits();
-
-  const handleLogout = async () => {
-    try {
-      setIsLoggingOut(true);
-      await logout();
-    } finally {
-      setIsLoggingOut(false);
-      if (logoutRedirect !== "/login") {
-        router.push(logoutRedirect);
-      }
-    }
-  };
-
-  const hasSubscription = !isSubscriptionLoading && subscription !== null;
-  const showCreditsSkeleton = hasSubscription && isCreditsLoading;
-  const showCredits =
-    hasSubscription && !isCreditsLoading;
-  const creditsPercentage =
-    showCredits && summary.totalCredits > 0
-      ? (summary.usedCredits / summary.totalCredits) * 100
-      : 0;
-
-  return (
-    <>
-      <LoadingOverlay isLoading={isLoggingOut} message="Saindo da sua conta..." />
-      <Popover>
-        <PopoverPrimitive.Trigger className="cursor-pointer">
-          {user && (
-            <UserAvatar
-              key={user.id}
-              photo={user.photo}
-              name={user.name}
-              size={40}
-            />
-          )}
-        </PopoverPrimitive.Trigger>
-
-        <PopoverPrimitive.Portal>
-          <PopoverPrimitive.Content
-            className={cn(
-              "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
-              contentClassName,
-            )}
-            side={side}
-            align={align}
-            sideOffset={8}
-          >
-            <div className="grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full">
-              {user && (
-                <UserAvatar
-                  key={user.id}
-                  photo={user.photo}
-                  name={user.name}
-                  size={32}
-                />
-              )}
-
-              <div className="flex flex-col gap-0.5 min-w-0">
-                <span className="paragraph-small-semibold text-gray-950 truncate">
-                  {user?.name || ""}
-                </span>
-                <span className="paragraph-xsmall-medium text-gray-500 truncate">
-                  {user?.email || ""}
-                </span>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
-              {showCreditsSkeleton && (
-                <div className="flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4">
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="paragraph-xsmall-semibold text-white truncate">
-                      Créditos usados
-                    </span>
-                    <div className="skeleton h-3.5 w-16 rounded" />
-                  </div>
-                  <div className="skeleton h-1.5 w-full rounded-full" />
-                </div>
-              )}
-
-              {showCredits && (
-                <div
-                  className={cn(
-                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
-                    onCreditsClick && "cursor-pointer hover:bg-gray-900",
-                  )}
-                  onClick={onCreditsClick}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="paragraph-xsmall-semibold text-white truncate">
-                      Créditos usados
-                    </span>
-                    <span className="paragraph-xsmall-medium text-white/50">
-                      {summary.usedCredits.toLocaleString("pt-BR")}/
-                      {summary.totalCredits.toLocaleString("pt-BR")}
-                    </span>
-                  </div>
-                  <Progress
-                    className="bg-white/10"
-                    indicatorColor="bg-white"
-                    value={creditsPercentage}
-                  />
-                </div>
-              )}
-
-              <div className="flex flex-col gap-2">
-                {menuItems.length > 0 && (
-                  <div className="flex flex-col">
-                    {menuItems.map((item, index) => (
-                      <NavBarItem
-                        key={index}
-                        icon={item.icon}
-                        label={item.label}
-                        onClick={item.onClick}
-                      />
-                    ))}
-                  </div>
-                )}
-                {onEditProfile && (
-                  <NavBarItem
-                    icon={<Settings size={16} />}
-                    label="Configurações"
-                    onClick={onEditProfile}
-                  />
-                )}
-                <Separator />
-                <NavBarItem label="Sair" onClick={handleLogout} />
-              </div>
-            </div>
-          </PopoverPrimitive.Content>
-        </PopoverPrimitive.Portal>
-      </Popover>
-    </>
-  );
-}
-
-export { ProfilePopover };
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Progress } from "../ui/feedback/Progress";
+import { Separator } from "../ui/data-display/Separator";
+import { IconSettings } from "@tabler/icons-react";
+import { NavBarItem } from "./NavBarItem";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
+import { useAuth } from "../../providers/auth.provider";
+import { cn } from "../../infra/utils/clsx";
+import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
+
+export interface ProfileMenuItem {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export interface ProfilePopoverProps {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+  onEditProfile?: () => void;
+  onCreditsClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  logoutRedirect?: string;
+}
+
+function ProfilePopover({
+  side = "top",
+  align = "start",
+  contentClassName = "absolute bottom-2 left-[26px]",
+  onEditProfile,
+  onCreditsClick,
+  menuItems = [],
+  logoutRedirect = "/login",
+}: ProfilePopoverProps) {
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
+    useIaCredits();
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await logout();
+    } finally {
+      setIsLoggingOut(false);
+      if (logoutRedirect !== "/login") {
+        router.push(logoutRedirect);
+      }
+    }
+  };
+
+  const hasSubscription = !isSubscriptionLoading && subscription !== null;
+  const showCreditsSkeleton = hasSubscription && isCreditsLoading;
+  const showCredits = hasSubscription && !isCreditsLoading;
+  const creditsPercentage =
+    showCredits && summary.totalCredits > 0
+      ? (summary.usedCredits / summary.totalCredits) * 100
+      : 0;
+
+  return (
+    <>
+      <LoadingOverlay
+        isLoading={isLoggingOut}
+        message="Saindo da sua conta..."
+      />
+      <Popover>
+        <PopoverPrimitive.Trigger className="cursor-pointer">
+          {user && (
+            <UserAvatar
+              key={user.id}
+              photo={user.photo}
+              name={user.name}
+              size={40}
+            />
+          )}
+        </PopoverPrimitive.Trigger>
+
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            className={cn(
+              "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
+              contentClassName,
+            )}
+            side={side}
+            align={align}
+            sideOffset={8}
+          >
+            <div className="grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full">
+              {user && (
+                <UserAvatar
+                  key={user.id}
+                  photo={user.photo}
+                  name={user.name}
+                  size={32}
+                />
+              )}
+
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="paragraph-small-semibold text-gray-950 truncate">
+                  {user?.name || ""}
+                </span>
+                <span className="paragraph-xsmall-medium text-gray-500 truncate">
+                  {user?.email || ""}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
+              {showCreditsSkeleton && (
+                <div className="flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="paragraph-xsmall-semibold text-white truncate">
+                      Créditos usados
+                    </span>
+                    <div className="skeleton h-3.5 w-16 rounded" />
+                  </div>
+                  <div className="skeleton h-1.5 w-full rounded-full" />
+                </div>
+              )}
+
+              {showCredits && (
+                <div
+                  className={cn(
+                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
+                    onCreditsClick && "cursor-pointer hover:bg-gray-900",
+                  )}
+                  onClick={onCreditsClick}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="paragraph-xsmall-semibold text-white truncate">
+                      Créditos usados
+                    </span>
+                    <span className="paragraph-xsmall-medium text-white/50">
+                      {summary.usedCredits.toLocaleString("pt-BR")}/
+                      {summary.totalCredits.toLocaleString("pt-BR")}
+                    </span>
+                  </div>
+                  <Progress
+                    className="bg-white/10"
+                    indicatorColor="bg-white"
+                    value={creditsPercentage}
+                  />
+                </div>
+              )}
+
+              <div className="flex flex-col gap-2">
+                {menuItems.length > 0 && (
+                  <div className="flex flex-col">
+                    {menuItems.map((item, index) => (
+                      <NavBarItem
+                        key={index}
+                        icon={item.icon}
+                        label={item.label}
+                        onClick={item.onClick}
+                      />
+                    ))}
+                  </div>
+                )}
+                <Separator />
+                <NavBarItem label="Sair" onClick={handleLogout} />
+              </div>
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </Popover>
+    </>
+  );
+}
+
+export { ProfilePopover };

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Plus, Settings, User, Users } from "lucide-react";
+import { IconPlus, IconSettings, IconUser, IconUsers } from '@tabler/icons-react';
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
 import { Button } from "../ui/buttons/Button";
@@ -93,7 +93,7 @@ export function UsersSelectorPopover({
       <PopoverTrigger className="cursor-pointer">
         <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
           <span className="paragraph-small-semibold">{totalInProject}</span>
-          <User size={16} />
+          <IconUser size={16} />
         </div>
       </PopoverTrigger>
 
@@ -117,7 +117,7 @@ export function UsersSelectorPopover({
                   window.location.href = `${GAPPS_URL}/my-teams?createNew=true`;
                 }}
               >
-                <Plus size={16} />
+                <IconPlus size={16} />
                 Adicionar
               </Button>
               <Tooltip>
@@ -129,7 +129,7 @@ export function UsersSelectorPopover({
                       window.location.href = `${GAPPS_URL}/my-teams`;
                     }}
                   >
-                    <Settings size={18} />
+                    <IconSettings size={18} />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent className="z-[1002]">
@@ -157,7 +157,7 @@ export function UsersSelectorPopover({
                 </>
               ) : allUsers.length === 0 ? (
                 <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
-                  <Users size={28} className="text-gray-300" />
+                  <IconUsers size={28} className="text-gray-300" />
                   <span className="paragraph-small-medium text-center text-gray-500">
                     Nenhum usuário encontrado.
                   </span>