From c1489703c511965108075b5a9d2be43812dd8af9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 22 May 2026 09:43:08 +0000
Subject: [PATCH 1/2] fix(layout): pass sidebarOpen prop to Header
 (ReferenceError crashed MainLayout)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header.tsx referenced `sidebarOpen` on lines 151-152 (aria-label and
aria-expanded for the hamburger button) but the variable was neither
declared in props nor in the component's scope — it only existed in
MainLayout.tsx. Every render of <Header /> threw ReferenceError:
sidebarOpen is not defined, which bubbled up to the global
EnhancedErrorBoundary in ProtectedRoute and showed "Falha no Módulo".

Sometimes the inner Suspense of <Header> caught it and just hid the
header silently (sidebar/header both missing because the same condition
caused a different render-time failure). Other sessions hit the outer
boundary and showed the full module-failure UI.

Telemetry confirms 82 occurrences of this exact ReferenceError in the
last ~5 hours on '/' and '/orcamentos/novo'.

Fix:
  • Add `sidebarOpen: boolean` to HeaderProps and destructure it
  • Pass it from MainLayout (where the state lives) into <Header />
  • Drop the unused searchQuery/onSearchChange props that no longer
    flowed anywhere (search state is owned by useSearchStore)
  • Clean up the unused imports the lint-staged hook caught while we
    were touching these files (Settings, RotateCcw, getRoleLabel,
    BackButton, isMockupGenerator, hasCompletedTour, etc.)

https://claude.ai/code/session_01CUVPfuj5W2dNtPNPAL7iA7
---
 src/components/layout/Header.tsx     | 304 +++++++++++++++------------
 src/components/layout/MainLayout.tsx | 112 +++++-----
 2 files changed, 228 insertions(+), 188 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 9ff460d25..72a60ac4e 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,8 +1,21 @@
-import React, { useEffect, type CSSProperties } from "react";
-import { User, Menu, Sun, Moon, Heart, GitCompare, Search, LogOut, Settings, HelpCircle, Shield, MoreHorizontal, Palette, RotateCcw } from "lucide-react";
-import { useTheme } from "@/contexts/ThemeContext";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
+import React, { useEffect, type CSSProperties } from 'react';
+import {
+  User,
+  Menu,
+  Sun,
+  Moon,
+  Heart,
+  GitCompare,
+  Search,
+  LogOut,
+  HelpCircle,
+  Shield,
+  MoreHorizontal,
+  Palette,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,42 +23,40 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Badge } from "@/components/ui/badge";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useFavoritesStore } from "@/stores/useFavoritesStore";
-import { useComparisonStore } from "@/stores/useComparisonStore";
-import { useAuth } from "@/contexts/AuthContext";
-import { useCurrentSection, useIsScrolled, useToast } from "@/hooks/ui";
-import { useOnboardingContext } from "@/contexts/OnboardingContext";
-import { OrganizationSwitcher } from "@/components/OrganizationSwitcher";
-import { useSearchStore } from "@/stores/useSearchStore";
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useFavoritesStore } from '@/stores/useFavoritesStore';
+import { useComparisonStore } from '@/stores/useComparisonStore';
+import { useAuth } from '@/contexts/AuthContext';
+import { useCurrentSection, useIsScrolled, useToast } from '@/hooks/ui';
+import { useOnboardingContext } from '@/contexts/OnboardingContext';
+import { OrganizationSwitcher } from '@/components/OrganizationSwitcher';
+import { useSearchStore } from '@/stores/useSearchStore';
 
-import { StockAlertsIndicator } from "@/components/inventory/StockAlertsIndicator";
-import { NotificationBell } from "@/components/notifications/NotificationDrawer";
-import { DiscountApprovalHeaderBadge } from "@/components/admin/DiscountApprovalHeaderBadge";
+import { StockAlertsIndicator } from '@/components/inventory/StockAlertsIndicator';
+import { NotificationBell } from '@/components/notifications/NotificationDrawer';
+import { DiscountApprovalHeaderBadge } from '@/components/admin/DiscountApprovalHeaderBadge';
 
-import { GlobalSearchPalette } from "@/components/search/GlobalSearchPalette";
-import { CartHeaderButton } from "@/components/cart/CartHeaderButton";
-import { cn } from "@/lib/utils";
-import { getRoleLabel } from "@/lib/roles";
-import { RoleBadge } from "@/components/RoleBadge";
+import { GlobalSearchPalette } from '@/components/search/GlobalSearchPalette';
+import { CartHeaderButton } from '@/components/cart/CartHeaderButton';
+import { cn } from '@/lib/utils';
+import { RoleBadge } from '@/components/RoleBadge';
 
 interface HeaderProps {
   onMenuToggle: () => void;
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
+  sidebarOpen: boolean;
 }
 
-export const Header = React.memo(function Header({ onMenuToggle, searchQuery, onSearchChange }: HeaderProps) {
+export const Header = React.memo(function Header({ onMenuToggle, sidebarOpen }: HeaderProps) {
   const { theme, actualTheme, setTheme, toggleTheme, isFallback } = useTheme();
   const navigate = useNavigate();
   const { toast } = useToast();
   const favoriteCount = useFavoritesStore((s) => s.favoriteCount);
   const compareCount = useComparisonStore((s) => s.compareCount);
-  const { user, profile, role, isAdmin, signOut, rolesLoaded } = useAuth();
+  const { user, profile, role, signOut, rolesLoaded } = useAuth();
   const currentSection = useCurrentSection();
-  const { restartTour, hasCompletedTour, isLoading: onboardingLoading, startTour } = useOnboardingContext();
+  const { restartTour } = useOnboardingContext();
   const setOpenSearch = useSearchStore((s) => s.setOpen);
 
   const isScrolled = useIsScrolled(20);
@@ -58,37 +69,34 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
   // Propaga --header-h ao :root para que stickys fora da árvore do Header
   // (ex.: dentro de <main>) também leiam o valor atual.
   useEffect(() => {
-    document.documentElement.style.setProperty("--header-h", `${headerHeightPx}px`);
+    document.documentElement.style.setProperty('--header-h', `${headerHeightPx}px`);
   }, [headerHeightPx]);
 
   // Mantém --header-left em sincronia com o breakpoint desktop (lg = 1024px)
   // e a largura atual da sidebar (--sidebar-w). Em telas <lg, a sidebar é
   // off-canvas, então --header-left = 0.
   useEffect(() => {
-    const mq = window.matchMedia("(min-width: 1024px)");
+    const mq = window.matchMedia('(min-width: 1024px)');
     const apply = () => {
-      const sidebarW = getComputedStyle(document.documentElement)
-        .getPropertyValue("--sidebar-w")
-        .trim() || "16rem";
-      document.documentElement.style.setProperty(
-        "--header-left",
-        mq.matches ? sidebarW : "0px",
-      );
+      const sidebarW =
+        getComputedStyle(document.documentElement).getPropertyValue('--sidebar-w').trim() ||
+        '16rem';
+      document.documentElement.style.setProperty('--header-left', mq.matches ? sidebarW : '0px');
     };
     apply();
-    mq.addEventListener("change", apply);
+    mq.addEventListener('change', apply);
     // Observa mudanças no atributo style do <html> (quando sidebar atualiza --sidebar-w)
     const obs = new MutationObserver(apply);
-    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
     return () => {
-      mq.removeEventListener("change", apply);
+      mq.removeEventListener('change', apply);
       obs.disconnect();
     };
   }, []);
 
   const handleToggleTheme = () => {
-    if (theme === "auto") {
-      setTheme(actualTheme === "dark" ? "light" : "dark");
+    if (theme === 'auto') {
+      setTheme(actualTheme === 'dark' ? 'light' : 'dark');
       return;
     }
     toggleTheme();
@@ -99,24 +107,24 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
       // Mostra toast imediato de processamento se desejar, ou apenas aguarda
       await signOut();
       toast({
-        title: "Até logo!",
-        description: "Você saiu da sua conta com segurança.",
+        title: 'Até logo!',
+        description: 'Você saiu da sua conta com segurança.',
       });
     } catch (err) {
-      console.error("[Header] signOut error:", err);
+      console.error('[Header] signOut error:', err);
       toast({
-        variant: "destructive",
-        title: "Aviso",
-        description: "Sessão encerrada localmente, mas houve um erro ao sincronizar com o servidor.",
+        variant: 'destructive',
+        title: 'Aviso',
+        description:
+          'Sessão encerrada localmente, mas houve um erro ao sincronizar com o servidor.',
       });
     } finally {
       // Força redirect para a página de login correta
-      navigate("/login", { replace: true });
+      navigate('/login', { replace: true });
     }
   };
 
-  const displayName = profile?.full_name || user?.email?.split("@")[0] || "Usuário";
-  const roleLabel = getRoleLabel(role);
+  const displayName = profile?.full_name || user?.email?.split('@')[0] || 'Usuário';
 
   // #10 — Truncate inteligente: "Joaquim Ataides" → "Joaquim A."
   const truncatedName = (() => {
@@ -129,49 +137,51 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
   return (
     <header
       data-testid="app-header"
-      style={{
-        "--header-h": `${headerHeightPx}px`,
-        left: "var(--header-left, 0px)",
-      } as CSSProperties}
+      style={
+        {
+          '--header-h': `${headerHeightPx}px`,
+          left: 'var(--header-left, 0px)',
+        } as CSSProperties
+      }
       className={cn(
-        "fixed top-0 right-0 z-40 border-b transition-all duration-300 print:hidden theme-transitioning",
-        "bg-background/40 backdrop-blur-xl border-border/30",
-        "h-[var(--header-h)]",
-        isScrolled && "bg-background/60 backdrop-blur-2xl shadow-[0_4px_20px_-5px_rgba(0,0,0,0.1)] border-border/50",
+        'theme-transitioning fixed right-0 top-0 z-40 border-b transition-all duration-300 print:hidden',
+        'border-border/30 bg-background/40 backdrop-blur-xl',
+        'h-[var(--header-h)]',
+        isScrolled &&
+          'border-border/50 bg-background/60 shadow-[0_4px_20px_-5px_rgba(0,0,0,0.1)] backdrop-blur-2xl',
       )}
     >
-      <div className="flex items-center justify-between h-full px-2 sm:px-4 lg:px-6">
+      <div className="flex h-full items-center justify-between px-2 sm:px-4 lg:px-6">
         {/* ══════ Left section — Menu + Âncora contextual (#1) ══════ */}
-        <div className="flex items-center gap-2 sm:gap-3 min-w-0 shrink-0">
+        <div className="flex min-w-0 shrink-0 items-center gap-2 sm:gap-3">
           <Button
             variant="ghost"
             size="icon"
-            className="lg:hidden hover:bg-primary/10 hover:text-primary h-8 w-8 sm:h-9 sm:w-9 focus-visible:ring-2 focus-visible:ring-primary"
+            className="h-8 w-8 hover:bg-primary/10 hover:text-primary focus-visible:ring-2 focus-visible:ring-primary sm:h-9 sm:w-9 lg:hidden"
             onClick={onMenuToggle}
-            aria-label={sidebarOpen ? "Fechar menu" : "Abrir menu"}
+            aria-label={sidebarOpen ? 'Fechar menu' : 'Abrir menu'}
             aria-expanded={sidebarOpen}
           >
             <Menu className="h-5 w-5" />
-
           </Button>
 
           {/* #1 — Seção atual como âncora */}
-          <div className="hidden lg:flex items-center gap-4">
+          <div className="hidden items-center gap-4 lg:flex">
             <div className="flex flex-col">
-              <span className="font-display text-[10px] font-bold text-primary/60 tracking-[0.2em] uppercase leading-none mb-1">
+              <span className="mb-1 font-display text-[10px] font-bold uppercase leading-none tracking-[0.2em] text-primary/60">
                 Seção Atual
               </span>
-              <span className="font-display text-sm font-bold text-foreground tracking-wide truncate max-w-[150px]">
+              <span className="max-w-[150px] truncate font-display text-sm font-bold tracking-wide text-foreground">
                 {currentSection}
               </span>
             </div>
-            <div className="h-8 w-px bg-border/20 mx-1" />
+            <div className="mx-1 h-8 w-px bg-border/20" />
             <OrganizationSwitcher />
           </div>
         </div>
 
         {/* ══════ Center section — Global Search (#4 expandida) ══════ */}
-        <div className="flex-1 max-w-2xl mx-6 hidden md:block" data-tour="search">
+        <div className="mx-6 hidden max-w-2xl flex-1 md:block" data-tour="search">
           <GlobalSearchPalette />
         </div>
 
@@ -180,66 +190,71 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
           {isFallback && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <div className="px-2 py-1 rounded bg-amber-100 text-amber-800 text-[10px] font-medium mr-2 flex items-center gap-1 animate-pulse border border-amber-200">
+                <div className="mr-2 flex animate-pulse items-center gap-1 rounded border border-amber-200 bg-amber-100 px-2 py-1 text-[10px] font-medium text-amber-800">
                   <Shield className="h-3 w-3" />
                   <span className="hidden sm:inline">Theme Safe-Mode</span>
                 </div>
               </TooltipTrigger>
               <TooltipContent className="max-w-[200px] text-xs">
-                O ThemeProvider não foi detectado. O sistema está rodando em modo de segurança com o tema padrão.
+                O ThemeProvider não foi detectado. O sistema está rodando em modo de segurança com o
+                tema padrão.
               </TooltipContent>
             </Tooltip>
           )}
           {/* Mobile search trigger */}
           <Button
             variant="ghost"
-            size="icon" 
+            size="icon"
             aria-label="Abrir busca global"
-            className="md:hidden h-8 w-8 hover:bg-primary/10 hover:text-primary"
+            className="h-8 w-8 hover:bg-primary/10 hover:text-primary md:hidden"
             onClick={() => setOpenSearch(true)}
           >
             <Search className="h-4 w-4" />
           </Button>
 
           {/* ── Cluster 1: Transacional (carrinho, notificações, alertas) ── */}
-          <div className="flex items-center gap-1 sm:gap-1.5 px-1.5 py-1 rounded-2xl bg-muted/30 border border-border/20">
+          <div className="flex items-center gap-1 rounded-2xl border border-border/20 bg-muted/30 px-1.5 py-1 sm:gap-1.5">
             <CartHeaderButton />
-            <div className="w-px h-4 bg-border/40 mx-0.5" />
+            <div className="mx-0.5 h-4 w-px bg-border/40" />
             <DiscountApprovalHeaderBadge />
             <NotificationBell />
-            <div className="hidden md:flex items-center gap-1">
-              <div className="w-px h-4 bg-border/40 mx-0.5" />
+            <div className="hidden items-center gap-1 md:flex">
+              <div className="mx-0.5 h-4 w-px bg-border/40" />
               <StockAlertsIndicator />
             </div>
           </div>
 
           {/* Divider entre clusters (#2) */}
-          <div className="h-5 w-px bg-border/60 mx-1.5 hidden md:block" />
+          <div className="mx-1.5 hidden h-5 w-px bg-border/60 md:block" />
 
           {/* ── Cluster 2: Utilitário (favoritos, comparar, tema) — desktop only ── */}
-          <div className="hidden md:flex items-center gap-0.5">
+          <div className="hidden items-center gap-0.5 md:flex">
             {/* #5 — Tooltip com atalho */}
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   variant="ghost"
-                  size="icon" aria-label="Favoritar"
-                  className="relative h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-primary/10 transition-all duration-200"
-                  onClick={() => navigate("/favoritos")}
+                  size="icon"
+                  aria-label="Favoritar"
+                  className="relative h-8 w-8 rounded-full text-muted-foreground transition-all duration-200 hover:bg-primary/10 hover:text-foreground"
+                  onClick={() => navigate('/favoritos')}
                   onMouseEnter={() => {
-                    import("@/pages/products/FavoritesPage");
+                    import('@/pages/products/FavoritesPage');
                   }}
                 >
                   <Heart className="h-[17px] w-[17px]" strokeWidth={1.75} />
                   {favoriteCount > 0 && (
-                    <Badge className="absolute -top-0.5 -right-0.5 h-4 min-w-4 px-1 flex items-center justify-center text-[9px] bg-orange text-orange-foreground border-0">
-                      {favoriteCount > 99 ? "99+" : favoriteCount}
+                    <Badge className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center border-0 bg-orange px-1 text-[9px] text-orange-foreground">
+                      {favoriteCount > 99 ? '99+' : favoriteCount}
                     </Badge>
                   )}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="bg-card border-border text-xs">
-                Favoritos <kbd className="ml-1.5 px-1 py-0.5 rounded bg-muted text-muted-foreground text-[10px] font-mono">Alt+F</kbd>
+              <TooltipContent className="border-border bg-card text-xs">
+                Favoritos{' '}
+                <kbd className="ml-1.5 rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-muted-foreground">
+                  Alt+F
+                </kbd>
               </TooltipContent>
             </Tooltip>
 
@@ -247,23 +262,27 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
               <TooltipTrigger asChild>
                 <Button
                   variant="ghost"
-                  size="icon" aria-label="GitCompare"
-                  className="relative h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-primary/10 transition-all duration-200"
-                  onClick={() => navigate("/comparar")}
+                  size="icon"
+                  aria-label="GitCompare"
+                  className="relative h-8 w-8 rounded-full text-muted-foreground transition-all duration-200 hover:bg-primary/10 hover:text-foreground"
+                  onClick={() => navigate('/comparar')}
                   onMouseEnter={() => {
-                    import("@/pages/products/ComparePage");
+                    import('@/pages/products/ComparePage');
                   }}
                 >
                   <GitCompare className="h-[17px] w-[17px]" strokeWidth={1.75} />
                   {compareCount > 0 && (
-                    <Badge className="absolute -top-0.5 -right-0.5 h-4 min-w-4 px-1 flex items-center justify-center text-[9px] bg-orange text-orange-foreground border-0">
-                      {compareCount > 4 ? "4" : compareCount}
+                    <Badge className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center border-0 bg-orange px-1 text-[9px] text-orange-foreground">
+                      {compareCount > 4 ? '4' : compareCount}
                     </Badge>
                   )}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="bg-card border-border text-xs">
-                Comparar <kbd className="ml-1.5 px-1 py-0.5 rounded bg-muted text-muted-foreground text-[10px] font-mono">Alt+C</kbd>
+              <TooltipContent className="border-border bg-card text-xs">
+                Comparar{' '}
+                <kbd className="ml-1.5 rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-muted-foreground">
+                  Alt+C
+                </kbd>
               </TooltipContent>
             </Tooltip>
 
@@ -273,14 +292,25 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
                   variant="ghost"
                   size="icon"
                   onClick={handleToggleTheme}
-                  className="relative h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-primary/10 transition-all duration-200"
-                 aria-label="Tema claro"><Sun className="h-[17px] w-[17px] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" strokeWidth={1.75} />
-                  <Moon className="absolute h-[17px] w-[17px] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" strokeWidth={1.75} />
+                  className="relative h-8 w-8 rounded-full text-muted-foreground transition-all duration-200 hover:bg-primary/10 hover:text-foreground"
+                  aria-label="Tema claro"
+                >
+                  <Sun
+                    className="h-[17px] w-[17px] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+                    strokeWidth={1.75}
+                  />
+                  <Moon
+                    className="absolute h-[17px] w-[17px] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+                    strokeWidth={1.75}
+                  />
                   <span className="sr-only">Alternar tema</span>
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="bg-card border-border text-xs">
-                {actualTheme === "dark" ? "Modo Claro" : "Modo Escuro"} <kbd className="ml-1.5 px-1 py-0.5 rounded bg-muted text-muted-foreground text-[10px] font-mono">Alt+T</kbd>
+              <TooltipContent className="border-border bg-card text-xs">
+                {actualTheme === 'dark' ? 'Modo Claro' : 'Modo Escuro'}{' '}
+                <kbd className="ml-1.5 rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-muted-foreground">
+                  Alt+T
+                </kbd>
               </TooltipContent>
             </Tooltip>
           </div>
@@ -289,39 +319,49 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
           <div className="md:hidden">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-primary/10" aria-label="Mais opções"><MoreHorizontal className="h-4 w-4" />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 hover:bg-primary/10"
+                  aria-label="Mais opções"
+                >
+                  <MoreHorizontal className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48 bg-card border-border">
-                <DropdownMenuItem onClick={() => navigate("/favoritos")} className="cursor-pointer">
-                  <Heart className="h-4 w-4 mr-2" />
+              <DropdownMenuContent align="end" className="w-48 border-border bg-card">
+                <DropdownMenuItem onClick={() => navigate('/favoritos')} className="cursor-pointer">
+                  <Heart className="mr-2 h-4 w-4" />
                   Favoritos
                   {favoriteCount > 0 && (
-                    <Badge className="ml-auto h-5 min-w-5 px-1.5 text-[10px] bg-orange text-orange-foreground border-0">
+                    <Badge className="ml-auto h-5 min-w-5 border-0 bg-orange px-1.5 text-[10px] text-orange-foreground">
                       {favoriteCount}
                     </Badge>
                   )}
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate("/comparar")} className="cursor-pointer">
-                  <GitCompare className="h-4 w-4 mr-2" />
+                <DropdownMenuItem onClick={() => navigate('/comparar')} className="cursor-pointer">
+                  <GitCompare className="mr-2 h-4 w-4" />
                   Comparar
                   {compareCount > 0 && (
-                    <Badge className="ml-auto h-5 min-w-5 px-1.5 text-[10px] bg-orange text-orange-foreground border-0">
+                    <Badge className="ml-auto h-5 min-w-5 border-0 bg-orange px-1.5 text-[10px] text-orange-foreground">
                       {compareCount}
                     </Badge>
                   )}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator className="bg-border" />
                 <DropdownMenuItem onClick={handleToggleTheme} className="cursor-pointer">
-                  {actualTheme === "dark" ? <Sun className="h-4 w-4 mr-2" /> : <Moon className="h-4 w-4 mr-2" />}
-                  {actualTheme === "dark" ? "Modo Claro" : "Modo Escuro"}
+                  {actualTheme === 'dark' ? (
+                    <Sun className="mr-2 h-4 w-4" />
+                  ) : (
+                    <Moon className="mr-2 h-4 w-4" />
+                  )}
+                  {actualTheme === 'dark' ? 'Modo Claro' : 'Modo Escuro'}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
 
           {/* Divider before avatar */}
-          <div className="h-5 w-px bg-border/60 mx-1.5 hidden sm:block" />
+          <div className="mx-1.5 hidden h-5 w-px bg-border/60 sm:block" />
 
           {/* ── User menu — com status online (#6) e truncate (#10) ── */}
           <DropdownMenu>
@@ -329,24 +369,26 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
               <Button
                 variant="ghost"
                 aria-label={`Menu de usuário: ${displayName}`}
-                className="flex items-center gap-3 h-10 px-2 sm:px-2.5 hover:bg-muted/40 rounded-xl transition-all duration-300"
+                className="flex h-10 items-center gap-3 rounded-xl px-2 transition-all duration-300 hover:bg-muted/40 sm:px-2.5"
               >
-                <div className="relative group/avatar">
-                  <div className="w-8 h-8 rounded-full bg-muted border border-border/40 flex items-center justify-center transition-all duration-300 group-hover/avatar:border-primary/50 group-hover/avatar:shadow-[0_0_10px_rgba(var(--primary),0.3)] overflow-hidden">
+                <div className="group/avatar relative">
+                  <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-border/40 bg-muted transition-all duration-300 group-hover/avatar:border-primary/50 group-hover/avatar:shadow-[0_0_10px_rgba(var(--primary),0.3)]">
                     {profile?.avatar_url ? (
                       <img
                         src={profile.avatar_url}
                         alt={displayName}
-                        className="w-full h-full object-cover" loading="lazy" />
+                        className="h-full w-full object-cover"
+                        loading="lazy"
+                      />
                     ) : (
                       <User className="h-4 w-4 text-muted-foreground" />
                     )}
                   </div>
                   {/* #6 — Status online dot */}
-                  <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-success rounded-full ring-2 ring-background shadow-sm" />
+                  <span className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-success shadow-sm ring-2 ring-background" />
                 </div>
-                <div className="hidden lg:flex flex-col items-start">
-                  <span className="text-sm font-medium text-foreground leading-tight truncate max-w-[120px]">
+                <div className="hidden flex-col items-start lg:flex">
+                  <span className="max-w-[120px] truncate text-sm font-medium leading-tight text-foreground">
                     {truncatedName}
                   </span>
                   {rolesLoaded ? (
@@ -354,51 +396,51 @@ export const Header = React.memo(function Header({ onMenuToggle, searchQuery, on
                   ) : (
                     <span
                       aria-hidden="true"
-                      className="h-4 w-12 rounded bg-muted/40 animate-pulse"
+                      className="h-4 w-12 animate-pulse rounded bg-muted/40"
                     />
                   )}
                 </div>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56 bg-card border-border">
+            <DropdownMenuContent align="end" className="w-56 border-border bg-card">
               <DropdownMenuLabel>
                 <div className="flex flex-col gap-1">
                   <span className="font-medium">{displayName}</span>
                   <span className="text-xs text-muted-foreground">{user?.email}</span>
                   {rolesLoaded ? (
-                    <RoleBadge role={role} className="self-start mt-1" />
+                    <RoleBadge role={role} className="mt-1 self-start" />
                   ) : (
                     <span
                       aria-hidden="true"
-                      className="self-start mt-1 h-5 w-16 rounded bg-muted/40 animate-pulse"
+                      className="mt-1 h-5 w-16 animate-pulse self-start rounded bg-muted/40"
                     />
                   )}
                 </div>
               </DropdownMenuLabel>
               <DropdownMenuSeparator className="bg-border" />
               <DropdownMenuItem
-                onClick={() => navigate("/admin/temas")}
-                className="hover:bg-primary/10 focus:bg-primary/10 cursor-pointer"
+                onClick={() => navigate('/admin/temas')}
+                className="cursor-pointer hover:bg-primary/10 focus:bg-primary/10"
               >
-                <Palette className="h-4 w-4 mr-2" />
+                <Palette className="mr-2 h-4 w-4" />
                 Skins
               </DropdownMenuItem>
-              <DropdownMenuItem 
+              <DropdownMenuItem
                 onClick={() => {
-                  navigate("/");
+                  navigate('/');
                   setTimeout(() => restartTour(), 300);
                 }}
-                className="hover:bg-primary/10 focus:bg-primary/10 cursor-pointer"
+                className="cursor-pointer hover:bg-primary/10 focus:bg-primary/10"
               >
-                <HelpCircle className="h-4 w-4 mr-2" />
+                <HelpCircle className="mr-2 h-4 w-4" />
                 Guia Rápido
               </DropdownMenuItem>
               <DropdownMenuSeparator className="bg-border" />
               <DropdownMenuItem
-                className="text-destructive focus:text-destructive hover:bg-destructive/10 focus:bg-destructive/10 cursor-pointer"
+                className="cursor-pointer text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive"
                 onClick={handleSignOut}
               >
-                <LogOut className="h-4 w-4 mr-2" />
+                <LogOut className="mr-2 h-4 w-4" />
                 Sair
               </DropdownMenuItem>
             </DropdownMenuContent>
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 9c5e5597a..5cc12a9e4 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -1,29 +1,37 @@
-import { useState, Suspense, useEffect, useRef } from "react";
-import { Outlet, useLocation } from "react-router-dom";
-import { performanceTracker } from "@/utils/performance";
-import { useScrollLockFix } from "@/hooks/ui/useScrollLockFix";
-import { useGlobalShortcuts } from "@/hooks/ui";
+import { useState, Suspense, useEffect, useRef } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { performanceTracker } from '@/utils/performance';
+import { useScrollLockFix } from '@/hooks/ui/useScrollLockFix';
+import { useGlobalShortcuts } from '@/hooks/ui';
 
-import { SkipToContent } from "@/components/common/SkipToContent";
-import { BackButton } from "@/components/common/BackButton";
+import { SkipToContent } from '@/components/common/SkipToContent';
 
-import { lazyWithRetry } from "@/lib/lazyWithRetry";
+import { lazyWithRetry } from '@/lib/lazyWithRetry';
 
 // Lazy load heavy layout components to reduce MainLayout chunk size
-const Header = lazyWithRetry(() => import("./Header").then(m => ({ default: m.Header })));
-const SidebarReorganized = lazyWithRetry(() => import("./SidebarReorganized").then(m => ({ default: m.SidebarReorganized })));
-const PageTransition = lazyWithRetry(() => import("@/components/effects/PageTransition").then(m => ({ default: m.PageTransition })));
+const Header = lazyWithRetry(() => import('./Header').then((m) => ({ default: m.Header })));
+const SidebarReorganized = lazyWithRetry(() =>
+  import('./SidebarReorganized').then((m) => ({ default: m.SidebarReorganized })),
+);
+const PageTransition = lazyWithRetry(() =>
+  import('@/components/effects/PageTransition').then((m) => ({ default: m.PageTransition })),
+);
 
 // Context providers must be imported synchronously (consumers render inside them)
-import { SellerCartProvider } from "@/contexts/SellerCartContext";
-import { OnboardingProvider } from "@/contexts/OnboardingContext";
-
-import { GlobalOverlay } from "./GlobalOverlay";
-const GlobalCommandBar = lazyWithRetry(() => import("@/components/command/GlobalCommandBar").then(m => ({ default: m.GlobalCommandBar })));
-const PersistentBreadcrumbs = lazyWithRetry(() => import("@/components/common/PersistentBreadcrumbs").then(m => ({ default: m.PersistentBreadcrumbs })));
-import { cn } from "@/lib/utils";
-import { ShortcutsHelpDialog } from "@/components/ui/ShortcutsHelpDialog";
-
+import { SellerCartProvider } from '@/contexts/SellerCartContext';
+import { OnboardingProvider } from '@/contexts/OnboardingContext';
+
+import { GlobalOverlay } from './GlobalOverlay';
+const GlobalCommandBar = lazyWithRetry(() =>
+  import('@/components/command/GlobalCommandBar').then((m) => ({ default: m.GlobalCommandBar })),
+);
+const PersistentBreadcrumbs = lazyWithRetry(() =>
+  import('@/components/common/PersistentBreadcrumbs').then((m) => ({
+    default: m.PersistentBreadcrumbs,
+  })),
+);
+import { cn } from '@/lib/utils';
+import { ShortcutsHelpDialog } from '@/components/ui/ShortcutsHelpDialog';
 
 interface MainLayoutProps {
   children?: React.ReactNode;
@@ -31,28 +39,26 @@ interface MainLayoutProps {
 
 export function MainLayout({ children }: MainLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
   const location = useLocation();
-  const isMockupGenerator = location.pathname === "/mockup-generator";
-  const isHome = location.pathname === "/";
+  const isHome = location.pathname === '/';
 
   useScrollLockFix();
   useGlobalShortcuts();
 
   useEffect(() => {
-    performanceTracker.mark("main-layout-mounted");
-    performanceTracker.measure("Main Layout Mount", "route-start:" + location.pathname, "main-layout-mounted");
+    performanceTracker.mark('main-layout-mounted');
+    performanceTracker.measure(
+      'Main Layout Mount',
+      'route-start:' + location.pathname,
+      'main-layout-mounted',
+    );
   }, []);
 
-
   // Propaga --breadcrumb-h ao :root para que stickys filhos (toolbars de
   // página) ancorem corretamente abaixo do Header + Breadcrumb. Em "/" a
   // breadcrumb-bar fica oculta → 0px.
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      "--breadcrumb-h",
-      isHome ? "0px" : "40px",
-    );
+    document.documentElement.style.setProperty('--breadcrumb-h', isHome ? '0px' : '40px');
   }, [isHome]);
 
   // Focus management: move focus to main content on route changes for screen readers
@@ -76,44 +82,39 @@ export function MainLayout({ children }: MainLayoutProps) {
       <div className="print:hidden">
         <SkipToContent />
       </div>
-      
+
       <div className="flex">
         <div className="print:hidden">
-          <Suspense fallback={<div className="hidden lg:block w-64 h-screen flex-shrink-0" />}>
-            <SidebarReorganized 
-              isOpen={sidebarOpen} 
-              onToggle={() => setSidebarOpen(!sidebarOpen)} 
+          <Suspense fallback={<div className="hidden h-screen w-64 flex-shrink-0 lg:block" />}>
+            <SidebarReorganized
+              isOpen={sidebarOpen}
+              onToggle={() => setSidebarOpen(!sidebarOpen)}
             />
           </Suspense>
         </div>
-        
-        <div className="flex-1 flex flex-col min-h-screen min-w-0 print:min-h-0 isolate">
+
+        <div className="isolate flex min-h-screen min-w-0 flex-1 flex-col print:min-h-0">
           <Suspense fallback={<div style={{ height: 56 }} className="print:hidden" />}>
-            <Header 
-              onMenuToggle={() => setSidebarOpen(!sidebarOpen)}
-              searchQuery={searchQuery}
-              onSearchChange={setSearchQuery}
-            />
+            <Header onMenuToggle={() => setSidebarOpen(!sidebarOpen)} sidebarOpen={sidebarOpen} />
           </Suspense>
 
           <div
             aria-hidden="true"
-            className="print:hidden shrink-0"
-            style={{ height: "var(--header-h, 56px)" }}
+            className="shrink-0 print:hidden"
+            style={{ height: 'var(--header-h, 56px)' }}
           />
 
           <div
             className={cn(
-              "sticky z-30 print:hidden transition-all duration-300 theme-transitioning",
-              "bg-background/20 backdrop-blur-xl",
-              "border-b border-border/40",
-              isHome && "hidden",
+              'theme-transitioning sticky z-30 transition-all duration-300 print:hidden',
+              'bg-background/20 backdrop-blur-xl',
+              'border-b border-border/40',
+              isHome && 'hidden',
             )}
-
-            style={{ top: "var(--header-h, 56px)" }}
+            style={{ top: 'var(--header-h, 56px)' }}
             data-testid="breadcrumb-bar"
           >
-            <div className="max-w-[1920px] mx-auto px-3 sm:px-4 lg:px-6 py-2">
+            <div className="mx-auto max-w-[1920px] px-3 py-2 sm:px-4 lg:px-6">
               <Suspense fallback={<div className="h-6" />}>
                 <PersistentBreadcrumbs showBackButton />
               </Suspense>
@@ -123,13 +124,12 @@ export function MainLayout({ children }: MainLayoutProps) {
           <main
             ref={mainRef}
             tabIndex={-1}
-            id="main-content" 
-            className="flex-1 p-3 sm:p-4 lg:p-6 pb-6 print:p-0 print:pb-0 outline-none overflow-x-clip bg-transparent theme-transitioning relative z-0" 
+            id="main-content"
+            className="theme-transitioning relative z-0 flex-1 overflow-x-clip bg-transparent p-3 pb-6 outline-none sm:p-4 lg:p-6 print:p-0 print:pb-0"
             role="main"
             aria-label="Conteúdo principal"
             aria-labelledby="main-heading"
           >
-
             <Suspense fallback={<div>{children || <Outlet />}</div>}>
               <PageTransition variant="fade-slide" duration={0.6}>
                 {children || <Outlet />}
@@ -145,9 +145,7 @@ export function MainLayout({ children }: MainLayoutProps) {
     <OnboardingProvider>
       <SellerCartProvider>
         <Suspense fallback={layoutContent}>
-          <GlobalCommandBar>
-            {layoutContent}
-          </GlobalCommandBar>
+          <GlobalCommandBar>{layoutContent}</GlobalCommandBar>
         </Suspense>
       </SellerCartProvider>
     </OnboardingProvider>

From fe0d196f069fa0e40615381033a63c319ecec1a6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 22 May 2026 09:47:41 +0000
Subject: [PATCH 2/2] chore(tests): satisfy lint baseline gate
 (consistent-type-imports, no-explicit-any)

Two test files that the Lovable bot recently touched introduced new
ESLint baseline regressions which started blocking the pre-push hook
on unrelated branches:

- src/contexts/AuthContext.test.tsx: `import()` type annotation
  forbidden by @typescript-eslint/consistent-type-imports. Hoisted the
  type-only import to the top of the file and reused via typeof.
- src/tests/AdminLayout.test.tsx: explicit `any` on a mock callback.
  Tightened to the actual callback shape vi.fn() expects.

These are surgical lint-only fixes in tests; no runtime behaviour
changes.

https://claude.ai/code/session_01CUVPfuj5W2dNtPNPAL7iA7
---
 src/contexts/AuthContext.test.tsx | 23 +++++++------
 src/tests/AdminLayout.test.tsx    | 54 +++++++++++++++++--------------
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/src/contexts/AuthContext.test.tsx b/src/contexts/AuthContext.test.tsx
index 403340013..2d99a086e 100644
--- a/src/contexts/AuthContext.test.tsx
+++ b/src/contexts/AuthContext.test.tsx
@@ -3,6 +3,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { AuthProvider, useAuth } from './AuthContext';
 import { supabase } from '@/integrations/supabase/client';
 import { type ReactNode } from 'react';
+import type * as AuthServiceModule from '@/services/authService';
 
 // Mock Supabase
 vi.mock('@/integrations/supabase/client', () => ({
@@ -35,11 +36,13 @@ vi.mock('@/integrations/supabase/client', () => ({
 
 // Mock services and utils
 vi.mock('@/services/authService', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/services/authService')>();
+  const actual = await importOriginal<typeof AuthServiceModule>();
   return {
     authService: {
       ...actual.authService,
-      fetchAAL: vi.fn().mockResolvedValue({ currentLevel: 'aal1', nextLevel: 'aal1', hasMFA: false }),
+      fetchAAL: vi
+        .fn()
+        .mockResolvedValue({ currentLevel: 'aal1', nextLevel: 'aal1', hasMFA: false }),
       fetchProfile: vi.fn().mockResolvedValue({ data: null, error: null }),
       queryRoles: vi.fn().mockResolvedValue({ data: [], error: null }),
     },
@@ -77,10 +80,10 @@ describe('AuthContext', () => {
 
       await act(async () => {
         try {
-        await result.current.signOut();
-      } catch {
-        /* falha remota tolerada */
-      }
+          await result.current.signOut();
+        } catch {
+          /* falha remota tolerada */
+        }
       });
 
       expect(result.current.user).toBeNull();
@@ -105,10 +108,10 @@ describe('AuthContext', () => {
 
       await act(async () => {
         try {
-        await result.current.signOut();
-      } catch {
-        /* falha remota tolerada */
-      }
+          await result.current.signOut();
+        } catch {
+          /* falha remota tolerada */
+        }
       });
 
       expect(supabase.rpc).toHaveBeenCalledWith('log_user_logout');
diff --git a/src/tests/AdminLayout.test.tsx b/src/tests/AdminLayout.test.tsx
index 3a63ed8d1..7bb42ad93 100644
--- a/src/tests/AdminLayout.test.tsx
+++ b/src/tests/AdminLayout.test.tsx
@@ -1,18 +1,18 @@
-import { render, screen } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
-import { vi, describe, it, expect, beforeEach } from "vitest";
-import AdminConexoesPage from "@/pages/admin/AdminConexoesPage";
-import AdminConexoesStatusPage from "@/pages/admin/AdminConexoesStatusPage";
-import { AuthProvider } from "@/contexts/AuthContext";
-import { ThemeProvider } from "@/contexts/ThemeContext";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { HelmetProvider } from "react-helmet-async";
-import { AriaLiveProvider } from "@/components/a11y/AriaLive";
-import { MainLayout } from "@/components/layout/MainLayout";
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import AdminConexoesPage from '@/pages/admin/AdminConexoesPage';
+import AdminConexoesStatusPage from '@/pages/admin/AdminConexoesStatusPage';
+import { AuthProvider } from '@/contexts/AuthContext';
+import { ThemeProvider } from '@/contexts/ThemeContext';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { HelmetProvider } from 'react-helmet-async';
+import { AriaLiveProvider } from '@/components/a11y/AriaLive';
+import { MainLayout } from '@/components/layout/MainLayout';
 
 // Mock das hooks que dependem de rede/Supabase
-vi.mock("@/hooks/admin", () => ({
+vi.mock('@/hooks/admin', () => ({
   useSecretsManager: () => ({
     secrets: [],
     list: vi.fn(),
@@ -29,15 +29,17 @@ vi.mock("@/hooks/admin", () => ({
   RETEST_COOLDOWN_PRESETS_MS: [3000, 10000, 30000, 60000],
 }));
 
-vi.mock("@/components/admin/connections/useSeverityChangeNotifier", () => ({
+vi.mock('@/components/admin/connections/useSeverityChangeNotifier', () => ({
   useSeverityChangeNotifier: vi.fn(),
 }));
 
-vi.mock("@/integrations/supabase/client", () => ({
+vi.mock('@/integrations/supabase/client', () => ({
   supabase: {
     auth: {
       getSession: vi.fn().mockResolvedValue({ data: { session: null }, error: null }),
-      onAuthStateChange: vi.fn().mockReturnValue({ data: { subscription: { unsubscribe: vi.fn() } } }),
+      onAuthStateChange: vi
+        .fn()
+        .mockReturnValue({ data: { subscription: { unsubscribe: vi.fn() } } }),
       getUser: vi.fn().mockResolvedValue({ data: { user: null }, error: null }),
       refreshSession: vi.fn().mockResolvedValue({ data: { session: null }, error: null }),
     },
@@ -55,7 +57,10 @@ vi.mock("@/integrations/supabase/client", () => ({
       not: vi.fn().mockReturnThis(),
       maybeSingle: vi.fn().mockResolvedValue({ data: null, error: null }),
       single: vi.fn().mockResolvedValue({ data: null, error: null }),
-      then: vi.fn((cb?: any) => { cb?.({ data: [], error: null }); return Promise.resolve({ data: [], error: null }); }),
+      then: vi.fn((cb?: (value: { data: unknown[]; error: null }) => void) => {
+        cb?.({ data: [], error: null });
+        return Promise.resolve({ data: [], error: null });
+      }),
     }),
     functions: {
       invoke: vi.fn().mockResolvedValue({ data: null, error: null }),
@@ -75,7 +80,7 @@ vi.mock("@/integrations/supabase/client", () => ({
 // tests/components/layout/MainLayout.breadcrumbs.test.tsx. Aqui o contrato sob
 // teste é "a página Admin renderiza DENTRO de um layout com sidebar" — então
 // mockamos o MainLayout com um wrapper fiel e leve (sidebar + children).
-vi.mock("@/components/layout/MainLayout", () => ({
+vi.mock('@/components/layout/MainLayout', () => ({
   MainLayout: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="main-layout">
       <div data-testid="sidebar">Sidebar</div>
@@ -110,27 +115,26 @@ const renderWithProviders = (ui: React.ReactElement) => {
           </QueryClientProvider>
         </AriaLiveProvider>
       </TooltipProvider>
-    </HelmetProvider>
+    </HelmetProvider>,
   );
 };
 
-
-describe("Admin Layout Standardization", () => {
+describe('Admin Layout Standardization', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("AdminConexoesPage deve renderizar dentro do MainLayout (com sidebar)", async () => {
+  it('AdminConexoesPage deve renderizar dentro do MainLayout (com sidebar)', async () => {
     renderWithProviders(<AdminConexoesPage />);
     // O MainLayout renderiza o sidebar. Verificamos se o mock do sidebar apareceu.
-    expect(await screen.findByTestId("sidebar", {}, { timeout: 3000 })).toBeInTheDocument();
+    expect(await screen.findByTestId('sidebar', {}, { timeout: 3000 })).toBeInTheDocument();
     // Verifica título da página para garantir que o conteúdo está lá
     expect(screen.getAllByText(/Conexões/i).length).toBeGreaterThan(0);
   });
 
-  it("AdminConexoesStatusPage deve renderizar dentro do MainLayout (com sidebar)", async () => {
+  it('AdminConexoesStatusPage deve renderizar dentro do MainLayout (com sidebar)', async () => {
     renderWithProviders(<AdminConexoesStatusPage />);
-    expect(await screen.findByTestId("sidebar", {}, { timeout: 3000 })).toBeInTheDocument();
+    expect(await screen.findByTestId('sidebar', {}, { timeout: 3000 })).toBeInTheDocument();
     expect(screen.getByText(/Status da sincronização/i)).toBeInTheDocument();
   });
 });