@greatapps/common 1.1.515 → 1.1.517

package/src/components/layouts/ProfilePopover.tsx

@@ -1,176 +1,176 @@
-"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 { Button } from "../ui/buttons/Button";
-import { Progress } from "../ui/feedback/Progress";
-import { Separator } from "../ui/data-display/Separator";
-import { NavBarItem } from "./NavBarItem";
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
-import { useAuth } from "../../providers/auth.provider";
-import { useIsDefaultWhitelabel, useWhitelabelUrls } from "../../providers/whitelabel.provider";
-import { cn } from "../../infra/utils/clsx";
-import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
-import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
-
-export interface ProfileMenuItem {
-  icon?: React.ReactNode;
-  label: string;
-  onClick: () => void;
-}
-
-export interface ProfilePopoverProps {
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-  menuItems?: ProfileMenuItem[];
-}
-
-function ProfilePopover({
-  side = "top",
-  align = "start",
-  contentClassName = "absolute bottom-2 left-[26px]",
-  menuItems = [],
-}: ProfilePopoverProps) {
-  const { user, logout } = useAuth();
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
-    useIaCredits();
-  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const { accountsUrl } = useWhitelabelUrls();
-  const router = useRouter();
-
-  const handleLogout = async () => {
-    setPopoverOpen(false);
-    setIsLoggingOut(true);
-    await logout();
-  };
-
-  const hasSubscription = !isSubscriptionLoading && subscription !== null;
-
-  const isApiPlan = hasSubscription && subscription.id_plan === 411;
-  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;
-  const creditsPercentage =
-    shouldShowCredits && summary.totalCredits > 0
-      ? (summary.usedCredits / summary.totalCredits) * 100
-      : 0;
-
-  return (
-    <>
-      <LoadingOverlay
-        isLoading={isLoggingOut}
-        message="Saindo da sua conta..."
-      />
-      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-        <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_auto] 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>
-
-              <Button
-                variant="secondary"
-                className="h-8! px-3! paragraph-xsmall-semibold"
-                onClick={() => {
-                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);
-                  if (isSameOrigin) {
-                    setPopoverOpen(false);
-                    router.push(`${window.location.pathname}?openProfile=true`);
-                  } else {
-                    window.location.href = `${accountsUrl}?openProfile=true`;
-                  }
-                }}
-              >
-                Editar
-              </Button>
-            </div>
-
-            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
-              {shouldShowCredits && (
-                <div
-                  className={cn(
-                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
-                    "cursor-pointer hover:bg-gray-950/90",
-                  )}
-                  onClick={() => openBuyCreditsModal()}
-                >
-                  <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">
-                <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 };
+"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 { Button } from "../ui/buttons/Button";
+import { Progress } from "../ui/feedback/Progress";
+import { Separator } from "../ui/data-display/Separator";
+import { NavBarItem } from "./NavBarItem";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
+import { useAuth } from "../../providers/auth.provider";
+import { useIsDefaultWhitelabel, useWhitelabelUrls } from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
+import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
+import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
+
+export interface ProfileMenuItem {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export interface ProfilePopoverProps {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+  menuItems?: ProfileMenuItem[];
+}
+
+function ProfilePopover({
+  side = "top",
+  align = "start",
+  contentClassName = "absolute bottom-2 left-[26px]",
+  menuItems = [],
+}: ProfilePopoverProps) {
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
+    useIaCredits();
+  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const { accountsUrl } = useWhitelabelUrls();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    setPopoverOpen(false);
+    setIsLoggingOut(true);
+    await logout();
+  };
+
+  const hasSubscription = !isSubscriptionLoading && subscription !== null;
+
+  const isApiPlan = hasSubscription && subscription.id_plan === 411;
+  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;
+  const creditsPercentage =
+    shouldShowCredits && summary.totalCredits > 0
+      ? (summary.usedCredits / summary.totalCredits) * 100
+      : 0;
+
+  return (
+    <>
+      <LoadingOverlay
+        isLoading={isLoggingOut}
+        message="Saindo da sua conta..."
+      />
+      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+        <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_auto] 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>
+
+              <Button
+                variant="secondary"
+                className="h-8! px-3! paragraph-xsmall-semibold"
+                onClick={() => {
+                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);
+                  if (isSameOrigin) {
+                    setPopoverOpen(false);
+                    router.push(`${window.location.pathname}?openProfile=true`);
+                  } else {
+                    window.location.href = `${accountsUrl}?openProfile=true`;
+                  }
+                }}
+              >
+                Editar
+              </Button>
+            </div>
+
+            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
+              {shouldShowCredits && (
+                <div
+                  className={cn(
+                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
+                    "cursor-pointer hover:bg-gray-950/90",
+                  )}
+                  onClick={() => openBuyCreditsModal()}
+                >
+                  <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">
+                <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/SideBarNavigation.tsx

@@ -1,65 +1,65 @@
-'use client';
-
-import * as React from "react"
-import { IconChevronLeft } from '@tabler/icons-react'
-import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore"
-import { useMdSidebarStore } from "../../store/useMdSidebarStore"
-import { cn } from "../../infra/utils/clsx"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
-import { useWhitelabel } from "../../providers/whitelabel.provider";
-
-function SideBarNavigation({
-    className,
-    children,
-    ...props
-}: React.ComponentProps<"div">) {
-    const { isExpanded, collapse } = useDesktopSidebarStore()
-    const collapseMd = useMdSidebarStore((s) => s.collapse)
-    const { whitelabel } = useWhitelabel()
-
-    React.useEffect(() => {
-        const mql = window.matchMedia('(min-width: 1351px)')
-        const handler = (e: MediaQueryListEvent) => {
-            if (e.matches) collapseMd()
-        }
-        if (mql.matches) collapseMd()
-        mql.addEventListener('change', handler)
-        return () => mql.removeEventListener('change', handler)
-    }, [collapseMd])
-
-    return (
-        <div
-            data-slot="sidebar-navigation"
-            className="relative hidden lg:block h-screen overflow-visible z-30"
-        >
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <button
-                        onClick={collapse}
-                        className={cn(
-                            "absolute  -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]",
-                            whitelabel?.id == 1 ? 'top-[59px]' : 'top-[70px]',
-                            isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none",
-                        )}
-                    >
-                        <IconChevronLeft size={16} className="text-gray-500" />
-                    </button>
-                </TooltipTrigger>
-                {isExpanded && <TooltipContent side="right">Recolher menu</TooltipContent>}
-            </Tooltip>
-            <div
-                className={cn(
-                    "h-full transition-[width] duration-300 ease-in-out overflow-hidden",
-                    isExpanded ? "w-[273px] border-r border-gray-200" : "w-0",
-                )}
-                {...props}
-            >
-                <div className={cn("flex flex-col h-full min-w-[273px] w-[273px] p-4", className)}>
-                    {children}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export { SideBarNavigation };
+'use client';
+
+import * as React from "react"
+import { IconChevronLeft } from '@tabler/icons-react'
+import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore"
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
+import { cn } from "../../infra/utils/clsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
+import { useWhitelabel } from "../../providers/whitelabel.provider";
+
+function SideBarNavigation({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div">) {
+    const { isExpanded, collapse } = useDesktopSidebarStore()
+    const collapseMd = useMdSidebarStore((s) => s.collapse)
+    const { whitelabel } = useWhitelabel()
+
+    React.useEffect(() => {
+        const mql = window.matchMedia('(min-width: 1351px)')
+        const handler = (e: MediaQueryListEvent) => {
+            if (e.matches) collapseMd()
+        }
+        if (mql.matches) collapseMd()
+        mql.addEventListener('change', handler)
+        return () => mql.removeEventListener('change', handler)
+    }, [collapseMd])
+
+    return (
+        <div
+            data-slot="sidebar-navigation"
+            className="relative hidden lg:block h-screen overflow-visible z-30"
+        >
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button
+                        onClick={collapse}
+                        className={cn(
+                            "absolute  -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]",
+                            whitelabel?.id == 1 ? 'top-[59px]' : 'top-[70px]',
+                            isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none",
+                        )}
+                    >
+                        <IconChevronLeft size={16} className="text-gray-500" />
+                    </button>
+                </TooltipTrigger>
+                {isExpanded && <TooltipContent side="right">Recolher menu</TooltipContent>}
+            </Tooltip>
+            <div
+                className={cn(
+                    "h-full transition-[width] duration-300 ease-in-out overflow-hidden",
+                    isExpanded ? "w-[273px] border-r border-gray-200" : "w-0",
+                )}
+                {...props}
+            >
+                <div className={cn("flex flex-col h-full min-w-[273px] w-[273px] p-4", className)}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export { SideBarNavigation };