@greatapps/common 1.1.258 → 1.1.260

package/src/components/layouts/MdSideBarNavigation.tsx

@@ -1,56 +1,56 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import { IconChevronLeft } from '@tabler/icons-react'
-import { useMdSidebarStore } from "../../store/useMdSidebarStore"
-import { cn } from "../../infra/utils/clsx"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
-
-function MdSideBarNavigation({
-    className,
-    children,
-    ...props
-}: React.ComponentProps<"div">) {
-    const { isExpanded, collapse } = useMdSidebarStore()
-
-    return (
-        <>
-            <div
-                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${
-                    isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
-                }`}
-                onClick={collapse}
-            />
-            <div
-                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${
-                    isExpanded ? "translate-x-0" : "-translate-x-full"
-                }`}
-            >
-                <div
-                    data-slot="md-sidebar-navigation"
-                    className={cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
-                    {...props}
-                >
-                    {isExpanded && (
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <button
-                                    onClick={collapse}
-                                    className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
-                                >
-                                    <IconChevronLeft size={16} className="text-gray-500" />
-                                </button>
-                            </TooltipTrigger>
-                            <TooltipContent side="right">Recolher menu</TooltipContent>
-                        </Tooltip>
-                    )}
-                    {children}
-                </div>
-            </div>
-        </>
-    )
-}
-
-export { MdSideBarNavigation };
+'use client';
+
+"use client"
+
+import * as React from "react"
+import { IconChevronLeft } from '@tabler/icons-react'
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
+import { cn } from "../../infra/utils/clsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
+
+function MdSideBarNavigation({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div">) {
+    const { isExpanded, collapse } = useMdSidebarStore()
+
+    return (
+        <>
+            <div
+                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${
+                    isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
+                }`}
+                onClick={collapse}
+            />
+            <div
+                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${
+                    isExpanded ? "translate-x-0" : "-translate-x-full"
+                }`}
+            >
+                <div
+                    data-slot="md-sidebar-navigation"
+                    className={cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
+                    {...props}
+                >
+                    {isExpanded && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    onClick={collapse}
+                                    className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
+                                >
+                                    <IconChevronLeft size={16} className="text-gray-500" />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">Recolher menu</TooltipContent>
+                        </Tooltip>
+                    )}
+                    {children}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export { MdSideBarNavigation };

package/src/components/layouts/NavBar.tsx

@@ -1,120 +1,120 @@
-"use client";
-
-import * as React from "react";
-import Image from "next/image";
-import { IconChevronRight } from "@tabler/icons-react";
-import { Separator } from "../ui/data-display/Separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { cn } from "../../infra/utils/clsx";
-
-type NavBarProps = {
-  onLogoClick: () => void;
-  onAppIconClick?: () => void;
-  activeApp?: "gapps" | "gpages";
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-function NavBar({
-  onLogoClick,
-  onAppIconClick,
-  activeApp,
-  showExpandButton = false,
-  onExpandClick,
-  children,
-  className,
-}: NavBarProps) {
-  return (
-    <div
-      className={cn(
-        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
-        className,
-      )}
-    >
-      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
-        {/* GreatApps logo */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger
-              className="cursor-pointer"
-              asChild
-              onClick={onLogoClick}
-            >
-              <Image
-                src="/icons/great-icon.svg"
-                alt="Great Icon"
-                width={28}
-                height={28}
-              />
-            </TooltipTrigger>
-            <TooltipContent side="right">Great</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
-              activeApp === "gapps" ? "opacity-100" : "opacity-0",
-            )}
-          />
-        </div>
-
-        <div className="relative w-full mt-[7.5px]">
-          <Separator />
-          {showExpandButton && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onExpandClick}
-                  className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
-                >
-                  <IconChevronRight size={16} className="text-gray-500" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">Expandir menu</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* GreatPages icon */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild onClick={onAppIconClick}>
-              {activeApp === "gpages" ? (
-                <div className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300">
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                </div>
-              ) : (
-                <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300 border-2 border-transparent ring-2 ring-transparent">
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                </div>
-              )}
-            </TooltipTrigger>
-            <TooltipContent side="right">GreatPages</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-cyan-300 rounded-r-xl transition-opacity duration-300",
-              activeApp === "gpages" ? "opacity-100" : "opacity-0",
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="flex flex-col items-center gap-2">{children}</div>
-    </div>
-  );
-}
-
-export { NavBar };
-export type { NavBarProps };
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+
+type NavBarProps = {
+  onLogoClick: () => void;
+  onAppIconClick?: () => void;
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function NavBar({
+  onLogoClick,
+  onAppIconClick,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className,
+}: NavBarProps) {
+  return (
+    <div
+      className={cn(
+        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
+        {/* GreatApps logo */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger
+              className="cursor-pointer"
+              asChild
+              onClick={onLogoClick}
+            >
+              <Image
+                src="/icons/great-icon.svg"
+                alt="Great Icon"
+                width={28}
+                height={28}
+              />
+            </TooltipTrigger>
+            <TooltipContent side="right">Great</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+              activeApp === "gapps" ? "opacity-100" : "opacity-0",
+            )}
+          />
+        </div>
+
+        <div className="relative w-full mt-[7.5px]">
+          <Separator />
+          {showExpandButton && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onExpandClick}
+                  className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
+                >
+                  <IconChevronRight size={16} className="text-gray-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">Expandir menu</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        {/* GreatPages icon */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild onClick={onAppIconClick}>
+              {activeApp === "gpages" ? (
+                <div className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300">
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+              ) : (
+                <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300 border-2 border-transparent ring-2 ring-transparent">
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+              )}
+            </TooltipTrigger>
+            <TooltipContent side="right">GreatPages</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-cyan-300 rounded-r-xl transition-opacity duration-300",
+              activeApp === "gpages" ? "opacity-100" : "opacity-0",
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+export { NavBar };
+export type { NavBarProps };

package/src/components/layouts/NotificationsPopover.tsx

@@ -1,115 +1,115 @@
-"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 };
+"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 };