@greatapps/common 1.1.379 → 1.1.381

package/src/components/navigation/shells/TabsMobileShell.tsx

@@ -1,72 +1,72 @@
-'use client';
-
-import { ReactNode, useRef, useEffect } from 'react';
-import { AppNavigationContext } from '../AppNavigationContext';
-import { useNavItemsContext } from '../NavItemsContext';
-
-function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
-  const { navItems } = useNavItemsContext();
-  const tabsListRef = useRef<HTMLDivElement>(null);
-  const activeTabRef = useRef<HTMLButtonElement>(null);
-
-  const activeLabel = navItems.find((i) => i.isActive)?.label;
-
-  // Scroll active tab into center when active item changes
-  useEffect(() => {
-    if (activeTabRef.current && tabsListRef.current) {
-      const tabsList = tabsListRef.current;
-      const activeTabElement = activeTabRef.current;
-      const tabsListRect = tabsList.getBoundingClientRect();
-      const activeTabRect = activeTabElement.getBoundingClientRect();
-      const scrollLeft =
-        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
-      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
-    }
-  }, [activeLabel]);
-
-  if (!navItems.length) return null;
-
-  return (
-    <div
-      ref={tabsListRef}
-      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
-      style={{ top: topOffset }}
-    >
-      {navItems.map((item) => (
-        <button
-          key={item.label}
-          ref={item.isActive ? activeTabRef : undefined}
-          onClick={item.onClick}
-          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
-            item.isActive
-              ? 'border-gray-950 text-gray-950'
-              : 'border-transparent text-gray-500 hover:text-gray-900'
-          }`}
-        >
-          {item.icon && <item.icon size={16} className="shrink-0" />}
-          <span
-            className={
-              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
-            }
-          >
-            {item.label}
-          </span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
-  return (
-    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
-      {/*
-        Children are hidden visually, but NavItems' useEffect still fires inside
-        display:none — React effects are tied to commit phase, not layout visibility.
-        This registers navItems in NavItemsContext so InternalTabsBar can read them.
-      */}
-      <div className="hidden">{children}</div>
-      <InternalTabsBar topOffset={topOffset} />
-    </AppNavigationContext.Provider>
-  );
-}
+'use client';
+
+import { ReactNode, useRef, useEffect } from 'react';
+import { AppNavigationContext } from '../AppNavigationContext';
+import { useNavItemsContext } from '../NavItemsContext';
+
+function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLButtonElement>(null);
+
+  const activeLabel = navItems.find((i) => i.isActive)?.label;
+
+  // Scroll active tab into center when active item changes
+  useEffect(() => {
+    if (activeTabRef.current && tabsListRef.current) {
+      const tabsList = tabsListRef.current;
+      const activeTabElement = activeTabRef.current;
+      const tabsListRect = tabsList.getBoundingClientRect();
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const scrollLeft =
+        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
+      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
+    }
+  }, [activeLabel]);
+
+  if (!navItems.length) return null;
+
+  return (
+    <div
+      ref={tabsListRef}
+      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
+      style={{ top: topOffset }}
+    >
+      {navItems.map((item) => (
+        <button
+          key={item.label}
+          ref={item.isActive ? activeTabRef : undefined}
+          onClick={item.onClick}
+          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
+            item.isActive
+              ? 'border-gray-950 text-gray-950'
+              : 'border-transparent text-gray-500 hover:text-gray-900'
+          }`}
+        >
+          {item.icon && <item.icon size={16} className="shrink-0" />}
+          <span
+            className={
+              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
+            }
+          >
+            {item.label}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
+  return (
+    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
+      {/*
+        Children are hidden visually, but NavItems' useEffect still fires inside
+        display:none — React effects are tied to commit phase, not layout visibility.
+        This registers navItems in NavItemsContext so InternalTabsBar can read them.
+      */}
+      <div className="hidden">{children}</div>
+      <InternalTabsBar topOffset={topOffset} />
+    </AppNavigationContext.Provider>
+  );
+}

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -1,160 +1,190 @@
-'use client';
-
-import { useState, useRef, useEffect, RefObject } from 'react';
-import { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';
-import { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';
-import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
-import { useAppNavigationContext } from '../AppNavigationContext';
-import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
-import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
-import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
-import { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';
-import type { NavigationProject } from '../types';
-
-export interface ProjectSelectorProps {
-  projects: NavigationProject[];
-  selectedProject: NavigationProject | null;
-  isLoading?: boolean;
-  onSelectProject: (project: NavigationProject) => void;
-  onAddProject?: () => void;
-  onManageProjects?: () => void;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <div className="flex items-center gap-2 p-2">
-      <div className="skeleton size-8 rounded-lg shrink-0" />
-      <div className="skeleton h-3.5 w-32 rounded" />
-    </div>
-  );
-}
-
-export function ProjectSelector({
-  projects,
-  selectedProject,
-  isLoading,
-  onSelectProject,
-  onAddProject,
-  onManageProjects,
-}: ProjectSelectorProps) {
-  const { breakpoint } = useAppNavigationContext();
-  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
-  const titleRef = useRef<HTMLDivElement>(null);
-  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
-
-  useEffect(() => {
-    if (openProjectList && breakpoint === 'mobile') {
-      setActiveSection('projects');
-      clearProjectList();
-    }
-  }, [openProjectList, breakpoint, clearProjectList]);
-
-  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
-  if (breakpoint === 'desktop' || breakpoint === 'md') {
-    return (
-      <div className="flex items-center justify-between">
-        <ProjectSelectorPopover
-          open={isPopoverOpen}
-          setOpen={setIsPopoverOpen}
-          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
-          projects={projects}
-          selectedProject={selectedProject}
-          onSelectProject={onSelectProject}
-          onAddProject={onAddProject}
-          onManageProjects={onManageProjects}
-        >
-          <div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
-            {isLoading ? (
-              <div className="skeleton h-4 w-32 rounded" />
-            ) : (
-              <span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
-                {selectedProject?.title}
-              </span>
-            )}
-            <IconChevronDown
-              size={20}
-              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-            />
-          </div>
-        </ProjectSelectorPopover>
-        <div className="flex items-center gap-2">
-          <UsersSelectorPopover projectId={selectedProject?.id} />
-        </div>
-      </div>
-    );
-  }
-
-  // Mobile: inline collapsible accordion
-  return (
-    <div className="flex flex-col gap-2.5">
-      <div className="flex items-center justify-between">
-        <div
-          className="flex items-center gap-1 cursor-pointer"
-          onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
-        >
-          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
-          <IconChevronDown
-            size={20}
-            className={`transition-transform duration-200 ${
-              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
-            }`}
-          />
-        </div>
-        <UsersSelectorPopover projectId={selectedProject?.id} />
-      </div>
-      {activeSection === 'projects' && (
-        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
-            {(onAddProject || onManageProjects) && (
-              <div className="flex items-center gap-1.5">
-                {canAddProject && onAddProject && (
-                  <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
-                    <IconPlus size={16} />
-                    Adicionar
-                  </Button>
-                )}
-                {onManageProjects && (
-                  <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
-                    <IconSettings size={18} />
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-          <Command className="gap-2">
-            <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
-              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-              {isLoading ? (
-                <>
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                </>
-              ) : (
-                projects.map((project) => (
-                  <CommandItem
-                    key={project.id}
-                    value={`${project.title}-${project.id}`}
-                    keywords={[project.title]}
-                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
-                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
-                  >
-                    <UserAvatar
-                      photo={project.photo}
-                      name={project.title}
-                      size={32}
-                    />
-                    {project.title}
-                  </CommandItem>
-                ))
-              )}
-            </CommandList>
-          </Command>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef, useEffect, RefObject } from 'react';
+import { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';
+import { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';
+import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
+import { useAppNavigationContext } from '../AppNavigationContext';
+import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
+import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
+import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
+import { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';
+import type { NavigationProject } from '../types';
+
+export interface ProjectSelectorProps {
+  projects: NavigationProject[];
+  selectedProject: NavigationProject | null;
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onLoadMore?: () => void | Promise<unknown>;
+  onSelectProject: (project: NavigationProject) => void;
+  onAddProject?: () => void;
+  onManageProjects?: () => void;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center gap-2 p-[8.8px]">
+      <div className="skeleton size-9 rounded-lg shrink-0" />
+      <div className="skeleton h-4 w-36 rounded" />
+    </div>
+  );
+}
+
+export function ProjectSelector({
+  projects,
+  selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+}: ProjectSelectorProps) {
+  const { breakpoint } = useAppNavigationContext();
+  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
+  const titleRef = useRef<HTMLDivElement>(null);
+  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
+
+  useEffect(() => {
+    if (openProjectList && breakpoint === 'mobile') {
+      setActiveSection('projects');
+      clearProjectList();
+    }
+  }, [openProjectList, breakpoint, clearProjectList]);
+
+  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
+  if (breakpoint === 'desktop' || breakpoint === 'md') {
+    return (
+      <div className="flex items-center justify-between">
+        <ProjectSelectorPopover
+          open={isPopoverOpen}
+          setOpen={setIsPopoverOpen}
+          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
+          projects={projects}
+          selectedProject={selectedProject}
+          isLoading={isLoading}
+          isFetchingNextPage={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          onLoadMore={onLoadMore}
+          onSelectProject={onSelectProject}
+          onAddProject={onAddProject}
+          onManageProjects={onManageProjects}
+        >
+          <div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
+            {isLoading ? (
+              <div className="skeleton h-4 w-32 rounded" />
+            ) : (
+              <span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
+                {selectedProject?.title}
+              </span>
+            )}
+            <IconChevronDown
+              size={20}
+              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+            />
+          </div>
+        </ProjectSelectorPopover>
+        <div className="flex items-center gap-2">
+          <UsersSelectorPopover projectId={selectedProject?.id} />
+        </div>
+      </div>
+    );
+  }
+
+  // Mobile: inline collapsible accordion
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="flex items-center justify-between">
+        <div
+          className="flex items-center gap-1 cursor-pointer"
+          onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
+        >
+          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
+          <IconChevronDown
+            size={20}
+            className={`transition-transform duration-200 ${
+              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
+            }`}
+          />
+        </div>
+        <UsersSelectorPopover projectId={selectedProject?.id} />
+      </div>
+      {activeSection === 'projects' && (
+        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Projetos</span>
+            {(onAddProject || onManageProjects) && (
+              <div className="flex items-center gap-1.5">
+                {canAddProject && onAddProject && (
+                  <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
+                    <IconPlus size={16} />
+                    Adicionar
+                  </Button>
+                )}
+                {onManageProjects && (
+                  <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
+                    <IconSettings size={18} />
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+          <Command className="gap-2">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
+              onScroll={(event) => {
+                if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+
+                const target = event.currentTarget;
+                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+                if (distanceToBottom <= 80) {
+                  onLoadMore();
+                }
+              }}
+            >
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : (
+                projects.map((project) => (
+                  <CommandItem
+                    key={project.id}
+                    value={`${project.title}-${project.id}`}
+                    keywords={[project.title]}
+                    className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}
+                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
+                  >
+                    <UserAvatar
+                      photo={project.photo}
+                      name={project.title}
+                      size={36}
+                    />
+                    {project.title}
+                  </CommandItem>
+                ))
+              )}
+              {isFetchingNextPage && (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/pages/NotFoundPage.tsx

@@ -1,67 +1,67 @@
-'use client';
-
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { useWhitelabel } from "../../providers/whitelabel.provider";
-import { Button } from "../ui/buttons/Button";
-
-function GreatAppsLogo() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 68 68" fill="none">
-      <rect x="4.5" y="4.5" width="58.4463" height="58.4463" rx="14.2271" fill="#09090B" />
-      <rect x="4.5" y="4.5" width="58.4463" height="58.4463" rx="14.2271" stroke="white" strokeWidth="9" />
-      <path d="M38.0883 19.5377C38.6909 19.5377 39.1795 20.0264 39.1795 20.6289V25.5892C39.1795 25.9865 39.106 26.3827 38.9364 26.7421C38.4857 27.6992 37.5451 28.2674 36.5452 28.2674H29.9031C28.9993 28.2674 28.2663 29.0004 28.2663 29.9042V37.5427C28.2663 38.4465 28.9993 39.1795 29.9031 39.1795H37.5415C38.4453 39.1795 39.1783 38.4465 39.1783 37.5427V30.9693C39.1783 30.4522 39.3053 29.9374 39.5804 29.5009C40.0596 28.7406 40.8768 28.2899 41.7462 28.2686H46.8168C47.4193 28.2686 47.908 28.7561 47.908 29.3586V37.8238C47.908 38.692 47.5629 39.5246 46.9497 40.139L40.1379 46.9508C39.5235 47.5652 38.6909 47.9091 37.8226 47.9091H29.3587C28.7561 47.9091 28.2674 47.4205 28.2674 46.8179L28.2674 41.8126C28.2674 41.114 27.9899 40.4439 27.4965 39.9504C27.0031 39.457 26.3329 39.1795 25.6343 39.1795H20.629C20.0265 39.1795 19.5378 38.6908 19.5378 38.0883L19.5378 29.6231C19.5378 28.7549 19.8829 27.9222 20.4961 27.3078L27.468 20.3371C27.9792 19.8259 28.6731 19.5377 29.3966 19.5377H38.0871H38.0883Z" fill="white" />
-    </svg>
-  );
-}
-
-export function NotFoundPage() {
-  const router = useRouter();
-  const { whitelabel } = useWhitelabel();
-  const isGreatApps = !whitelabel || whitelabel.id === 1;
-  const whitelabelLogo = whitelabel?.logo
-    ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`
-    : null;
-
-  return (
-    <div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white">
-      <div className="flex flex-col items-center gap-[22px] text-center">
-        <div className="relative flex flex-col items-center">
-          <Image src="/images/404.svg" alt="404" width={440} height={173} priority unoptimized />
-
-          <div className="-mt-1 w-full border-t border-zinc-100" />
-
-          <div className="-mt-[25px]">
-            {isGreatApps ? (
-              <GreatAppsLogo />
-            ) : whitelabelLogo ? (
-              <Image src={whitelabelLogo} alt={whitelabel?.name || ''} width={50} height={50} className="rounded-xl object-contain" />
-            ) : null}
-          </div>
-        </div>
-
-        <h1 className="max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]">
-          Página não foi encontrada!
-        </h1>
-
-        <p className="max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0">
-          A página que você está procurando não existe. Verifique se digitou corretamente o link que está procurando.
-        </p>
-
-        <Button
-          variant="secondary"
-          className="h-10!"
-          onClick={() => {
-            if (window.history.length > 1) {
-              router.back();
-            } else {
-              router.push('/');
-            }
-          }}
-        >
-          Voltar para o início
-        </Button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useWhitelabel } from "../../providers/whitelabel.provider";
+import { Button } from "../ui/buttons/Button";
+
+function GreatAppsLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 68 68" fill="none">
+      <rect x="4.5" y="4.5" width="58.4463" height="58.4463" rx="14.2271" fill="#09090B" />
+      <rect x="4.5" y="4.5" width="58.4463" height="58.4463" rx="14.2271" stroke="white" strokeWidth="9" />
+      <path d="M38.0883 19.5377C38.6909 19.5377 39.1795 20.0264 39.1795 20.6289V25.5892C39.1795 25.9865 39.106 26.3827 38.9364 26.7421C38.4857 27.6992 37.5451 28.2674 36.5452 28.2674H29.9031C28.9993 28.2674 28.2663 29.0004 28.2663 29.9042V37.5427C28.2663 38.4465 28.9993 39.1795 29.9031 39.1795H37.5415C38.4453 39.1795 39.1783 38.4465 39.1783 37.5427V30.9693C39.1783 30.4522 39.3053 29.9374 39.5804 29.5009C40.0596 28.7406 40.8768 28.2899 41.7462 28.2686H46.8168C47.4193 28.2686 47.908 28.7561 47.908 29.3586V37.8238C47.908 38.692 47.5629 39.5246 46.9497 40.139L40.1379 46.9508C39.5235 47.5652 38.6909 47.9091 37.8226 47.9091H29.3587C28.7561 47.9091 28.2674 47.4205 28.2674 46.8179L28.2674 41.8126C28.2674 41.114 27.9899 40.4439 27.4965 39.9504C27.0031 39.457 26.3329 39.1795 25.6343 39.1795H20.629C20.0265 39.1795 19.5378 38.6908 19.5378 38.0883L19.5378 29.6231C19.5378 28.7549 19.8829 27.9222 20.4961 27.3078L27.468 20.3371C27.9792 19.8259 28.6731 19.5377 29.3966 19.5377H38.0871H38.0883Z" fill="white" />
+    </svg>
+  );
+}
+
+export function NotFoundPage() {
+  const router = useRouter();
+  const { whitelabel } = useWhitelabel();
+  const isGreatApps = !whitelabel || whitelabel.id === 1;
+  const whitelabelLogo = whitelabel?.logo
+    ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`
+    : null;
+
+  return (
+    <div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white">
+      <div className="flex flex-col items-center gap-[22px] text-center">
+        <div className="relative flex flex-col items-center">
+          <Image src="/images/404.svg" alt="404" width={440} height={173} priority unoptimized />
+
+          <div className="-mt-1 w-full border-t border-zinc-100" />
+
+          <div className="-mt-[25px]">
+            {isGreatApps ? (
+              <GreatAppsLogo />
+            ) : whitelabelLogo ? (
+              <Image src={whitelabelLogo} alt={whitelabel?.name || ''} width={50} height={50} className="rounded-xl object-contain" />
+            ) : null}
+          </div>
+        </div>
+
+        <h1 className="max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]">
+          Página não foi encontrada!
+        </h1>
+
+        <p className="max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0">
+          A página que você está procurando não existe. Verifique se digitou corretamente o link que está procurando.
+        </p>
+
+        <Button
+          variant="secondary"
+          className="h-10!"
+          onClick={() => {
+            if (window.history.length > 1) {
+              router.back();
+            } else {
+              router.push('/');
+            }
+          }}
+        >
+          Voltar para o início
+        </Button>
+      </div>
+    </div>
+  );
+}