@greatapps/common 1.1.515 → 1.1.517

package/src/components/layouts/NavBar.tsx

@@ -1,175 +1,175 @@
-"use client";
-
-import * as React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { IconChevronRight } from "@tabler/icons-react";
-import { Separator } from "../ui/data-display/Separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
-import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
-import { cn } from "../../infra/utils/clsx";
-
-type NavBarProps = {
-  logoHref: string;
-  appIconHref: string;
-  activeApp?: "gapps" | "gpages";
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-function NavBar({
-  logoHref,
-  appIconHref,
-  activeApp,
-  showExpandButton = false,
-  onExpandClick,
-  children,
-  className,
-}: NavBarProps) {
-  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
-    useDesktopSidebarStore();
-  useDesktopSidebarHydration();
-  const { whitelabel } = useWhitelabel();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const primaryColor = whitelabel?.general?.primary_color;
-  const wlName = whitelabel?.name || 'Great';
-
-  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
-            >
-              <Link href={logoHref}>
-                {isDefaultWl ? (
-                  <Image
-                    src="/icons/great-icon.svg"
-                    alt="Great Icon"
-                    width={28}
-                    height={28}
-                  />
-                ) : (
-                  <div
-                    className={cn("size-10 rounded-lg flex items-center justify-center transition-opacity duration-300", activeApp !== "gapps" && "opacity-20")}
-                    style={{ backgroundColor: primaryColor }}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-                      <path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-                      <path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-                      <path d="M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
-                    </svg>
-                  </div>
-                )}
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">{wlName}</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-gray-950" : "",
-              activeApp === "gapps" ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </div>
-
-        <div className="relative w-full mt-[7.5px]">
-          <Separator />
-          {/* Md expand button */}
-          {showExpandButton && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onExpandClick}
-                  className="hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 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>
-          )}
-          {/* Desktop expand button */}
-          {!isDesktopExpanded && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={toggleDesktop}
-                  className="hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 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>
-              <Link
-                href={appIconHref}
-                className={cn(
-                  "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                  activeApp === "gpages"
-                    ? isDefaultWl
-                      ? "bg-cyan-100 border-white ring-cyan-300"
-                      : "border-white ring-transparent"
-                    : isDefaultWl
-                      ? "hover:bg-gray-100 border-transparent ring-transparent"
-                      : "border-transparent ring-transparent",
-                )}
-                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== "gpages" ? 0.2 : undefined } : undefined}
-              >
-                {isDefaultWl ? (
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                ) : (
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M4 8h16" />
-                    <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
-                    <path d="M8 4v4" />
-                  </svg>
-                )}
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-cyan-300" : "",
-              activeApp === "gpages" ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </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 Link from "next/link";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
+import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
+
+type NavBarProps = {
+  logoHref: string;
+  appIconHref: string;
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function NavBar({
+  logoHref,
+  appIconHref,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className,
+}: NavBarProps) {
+  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
+    useDesktopSidebarStore();
+  useDesktopSidebarHydration();
+  const { whitelabel } = useWhitelabel();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const primaryColor = whitelabel?.general?.primary_color;
+  const wlName = whitelabel?.name || 'Great';
+
+  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
+            >
+              <Link href={logoHref}>
+                {isDefaultWl ? (
+                  <Image
+                    src="/icons/great-icon.svg"
+                    alt="Great Icon"
+                    width={28}
+                    height={28}
+                  />
+                ) : (
+                  <div
+                    className={cn("size-10 rounded-lg flex items-center justify-center transition-opacity duration-300", activeApp !== "gapps" && "opacity-20")}
+                    style={{ backgroundColor: primaryColor }}
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+                      <path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+                      <path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+                      <path d="M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+                    </svg>
+                  </div>
+                )}
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">{wlName}</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-gray-950" : "",
+              activeApp === "gapps" ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
+        </div>
+
+        <div className="relative w-full mt-[7.5px]">
+          <Separator />
+          {/* Md expand button */}
+          {showExpandButton && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onExpandClick}
+                  className="hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 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>
+          )}
+          {/* Desktop expand button */}
+          {!isDesktopExpanded && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={toggleDesktop}
+                  className="hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 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>
+              <Link
+                href={appIconHref}
+                className={cn(
+                  "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                  activeApp === "gpages"
+                    ? isDefaultWl
+                      ? "bg-cyan-100 border-white ring-cyan-300"
+                      : "border-white ring-transparent"
+                    : isDefaultWl
+                      ? "hover:bg-gray-100 border-transparent ring-transparent"
+                      : "border-transparent ring-transparent",
+                )}
+                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== "gpages" ? 0.2 : undefined } : undefined}
+              >
+                {isDefaultWl ? (
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M4 8h16" />
+                    <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
+                    <path d="M8 4v4" />
+                  </svg>
+                )}
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-cyan-300" : "",
+              activeApp === "gpages" ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
+        </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,118 +1,118 @@
-"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 { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
-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,
-}: NotificationsPopoverProps) {
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
-  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-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
-                resolvedBadgeClassName,
-              )}
-            />
-          )}
-        </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 { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
+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,
+}: NotificationsPopoverProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
+  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-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
+                resolvedBadgeClassName,
+              )}
+            />
+          )}
+        </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 };