From 2920c600841e57f5a94d7b92a105fac2eda01b83 Mon Sep 17 00:00:00 2001
From: adm01-debug <adm01@promobrindes.com.br>
Date: Sat, 23 May 2026 18:20:13 -0300
Subject: [PATCH 1/4] fix(ci): jest-dom types + useStockAlerts.integration.test
 + RestrictedRouteNotice (lote 1/4)

---
 .../layout/sidebar/RestrictedRouteNotice.tsx  | 95 ++++++++++---------
 .../useStockAlerts.integration.test.tsx       |  2 +-
 src/types/jest-dom.d.ts                       | 12 +++
 3 files changed, 61 insertions(+), 48 deletions(-)
 create mode 100644 src/types/jest-dom.d.ts

diff --git a/src/components/layout/sidebar/RestrictedRouteNotice.tsx b/src/components/layout/sidebar/RestrictedRouteNotice.tsx
index 9faa912a0..192bb77d3 100644
--- a/src/components/layout/sidebar/RestrictedRouteNotice.tsx
+++ b/src/components/layout/sidebar/RestrictedRouteNotice.tsx
@@ -1,18 +1,10 @@
-import { ShieldAlert, KeyRound, Lock } from "lucide-react";
-import { useLocation, Link } from "react-router-dom";
-import { useAuth } from "@/contexts/AuthContext";
-import {
-  isDevOnlyPath,
-  isAdminOnlyPath,
-} from "@/lib/navigation/restricted-routes";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { ShieldAlert, KeyRound, Lock } from 'lucide-react';
+import { useLocation, Link } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { isDevOnlyPath, isAdminOnlyPath } from '@/lib/navigation/restricted-routes';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 interface RestrictedRouteNoticeProps {
   isCollapsed: boolean;
@@ -27,9 +19,7 @@ interface RestrictedRouteNoticeProps {
  * - No modo colapsado, vira só o ícone com tooltip explicativo.
  * - Dev nunca vê (tem acesso).
  */
-export function RestrictedRouteNotice({
-  isCollapsed,
-}: RestrictedRouteNoticeProps) {
+export function RestrictedRouteNotice({ isCollapsed }: RestrictedRouteNoticeProps) {
   const location = useLocation();
   const { isAdmin, isDev, rolesLoaded } = useAuth();
   const path = location.pathname;
@@ -42,16 +32,15 @@ export function RestrictedRouteNotice({
 
   // Rota técnica: precisa de dev. Bloqueia tanto vendedor quanto admin.
   // Rota admin: bloqueia só vendedor.
-  const blocked =
-    (isDevRoute && !isDev) || (isAdminRoute && !isAdmin && !isDev);
+  const blocked = (isDevRoute && !isDev) || (isAdminRoute && !isAdmin && !isDev);
   if (!blocked) return null;
 
-  const requiredRole = isDevRoute ? "dev" : "admin";
-  const title = "Acesso Restrito";
+  const requiredRole = isDevRoute ? 'dev' : 'admin';
+  const title = 'Acesso Restrito';
   const description = isDevRoute
-    ? "Esta funcionalidade é exclusiva para a equipe técnica de engenharia."
-    : "Esta funcionalidade exige permissões de supervisão ou administração.";
-  
+    ? 'Esta funcionalidade é exclusiva para a equipe técnica de engenharia.'
+    : 'Esta funcionalidade exige permissões de supervisão ou administração.';
+
   const icon = isDevRoute ? KeyRound : Lock;
   const Icon = icon;
 
@@ -64,27 +53,36 @@ export function RestrictedRouteNotice({
               role="status"
               aria-label={`${title}: ${description}`}
               className={cn(
-                "mx-auto my-2 flex h-8 w-8 items-center justify-center rounded-md",
-                "bg-amber-500/10 text-amber-500 border border-amber-500/30 transition-all duration-300",
-                "hover:bg-amber-500/20 hover:border-amber-500/50"
+                'mx-auto my-2 flex h-8 w-8 items-center justify-center rounded-md',
+                'border border-amber-500/30 bg-amber-500/10 text-amber-500 transition-all duration-300',
+                'hover:border-amber-500/50 hover:bg-amber-500/20',
               )}
             >
               <Icon className="h-4 w-4" aria-hidden="true" />
             </div>
           </TooltipTrigger>
-          <TooltipContent side="right" className="max-w-xs border-amber-500/20 bg-background/95 backdrop-blur-md">
-            <p className="font-bold text-amber-500 text-xs flex items-center gap-1.5">
+          <TooltipContent
+            side="right"
+            className="max-w-xs border-amber-500/20 bg-background/95 backdrop-blur-md"
+          >
+            <p className="flex items-center gap-1.5 text-xs font-bold text-amber-500">
               <ShieldAlert className="h-3 w-3" />
               {title}
             </p>
-            <p className="text-[11px] mt-1 text-muted-foreground leading-relaxed">
-              {description}
-            </p>
-            <div className="mt-2 pt-2 border-t border-border/40 flex items-center justify-between gap-4">
+            <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">{description}</p>
+            <div className="mt-2 flex items-center justify-between gap-4 border-t border-border/40 pt-2">
               <span className="text-[10px] text-muted-foreground">
-                Nível: <span className="font-mono font-bold text-amber-600/80 uppercase">{requiredRole}</span>
+                Nível:{' '}
+                <span className="font-mono font-bold uppercase text-amber-600/80">
+                  {requiredRole}
+                </span>
               </span>
-              <Button asChild size="xs" variant="ghost" className="h-6 text-[10px] px-2 hover:bg-amber-500/10 hover:text-amber-600">
+              <Button
+                asChild
+                size="sm"
+                variant="ghost"
+                className="h-6 px-2 text-[10px] hover:bg-amber-500/10 hover:text-amber-600"
+              >
                 <Link to="/">Sair</Link>
               </Button>
             </div>
@@ -105,23 +103,27 @@ export function RestrictedRouteNotice({
         <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-amber-500/20 text-amber-500 shadow-inner">
           <Icon className="h-4 w-4" aria-hidden="true" />
         </div>
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
-            <p className="font-bold text-amber-500 text-[11px] uppercase tracking-wider">
-              {title}
-            </p>
-            <span className="rounded bg-amber-500/20 px-1.5 py-0.5 font-mono text-[9px] font-bold text-amber-600 uppercase">
+            <p className="text-[11px] font-bold uppercase tracking-wider text-amber-500">{title}</p>
+            <span className="rounded bg-amber-500/20 px-1.5 py-0.5 font-mono text-[9px] font-bold uppercase text-amber-600">
               {requiredRole}
             </span>
           </div>
-          <p className="text-muted-foreground mt-1 text-[11px] leading-relaxed">
-            {description}
-          </p>
+          <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">{description}</p>
           <div className="mt-2.5 flex items-center gap-2">
-            <Button asChild size="xs" className="h-7 px-3 bg-amber-500 hover:bg-amber-600 text-white font-bold text-[10px] rounded-lg transition-all duration-300">
+            <Button
+              asChild
+              size="sm"
+              className="h-7 rounded-lg bg-amber-500 px-3 text-[10px] font-bold text-white transition-all duration-300 hover:bg-amber-600"
+            >
               <Link to="/">Voltar ao Início</Link>
             </Button>
-            <Button variant="ghost" size="xs" className="h-7 px-2 text-[10px] text-muted-foreground hover:text-foreground">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-[10px] text-muted-foreground hover:text-foreground"
+            >
               Solicitar Acesso
             </Button>
           </div>
@@ -130,4 +132,3 @@ export function RestrictedRouteNotice({
     </div>
   );
 }
-
diff --git a/src/hooks/products/useStockAlerts.integration.test.tsx b/src/hooks/products/useStockAlerts.integration.test.tsx
index 915827c0f..86384e907 100644
--- a/src/hooks/products/useStockAlerts.integration.test.tsx
+++ b/src/hooks/products/useStockAlerts.integration.test.tsx
@@ -56,7 +56,7 @@ describe('useStockAlerts integration', () => {
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
 
     const callArgs = invokeExternalDbMock.mock.calls[0][0];
-    const selectStr = callArgs.select;
+    const selectStr = callArgs.select ?? '';
 
     const fields = selectStr.split(',').map((f: string) => f.trim());
     expect(fields).not.toContain('supplier_name');
diff --git a/src/types/jest-dom.d.ts b/src/types/jest-dom.d.ts
new file mode 100644
index 000000000..a6f0d9416
--- /dev/null
+++ b/src/types/jest-dom.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Tipos dos matchers do @testing-library/jest-dom para o escopo `src/`.
+ *
+ * O setup de runtime (`tests/setup.ts`) importa '@testing-library/jest-dom',
+ * mas esse arquivo fica fora do `include` do tsconfig.app.json (que cobre
+ * apenas `src`). Sem esta referência, os testes em `src/**` perdem os tipos
+ * dos matchers (toBeInTheDocument, toHaveTextContent, toBeDisabled, etc.),
+ * gerando TS2339 no gate de typecheck.
+ *
+ * Esta declaração apenas estende os tipos do Vitest — não tem efeito em runtime.
+ */
+import '@testing-library/jest-dom/vitest';

From bf3e435c71dfad0e980fbb96e62844eaf75a38d2 Mon Sep 17 00:00:00 2001
From: adm01-debug <adm01@promobrindes.com.br>
Date: Sat, 23 May 2026 18:21:21 -0300
Subject: [PATCH 2/4] fix(ci): ConnectionUI.test +
 ConnectionsOverviewTable.test + selectors.ts (lote 2/4)

---
 .../__tests__/ConnectionUI.test.tsx           | 12 +++++++----
 .../ConnectionsOverviewTable.test.tsx         | 18 ++++++++++------
 src/lib/personalization/selectors.ts          | 21 +++++++++++--------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/admin/connections/__tests__/ConnectionUI.test.tsx b/src/components/admin/connections/__tests__/ConnectionUI.test.tsx
index 6db866893..0826044fb 100644
--- a/src/components/admin/connections/__tests__/ConnectionUI.test.tsx
+++ b/src/components/admin/connections/__tests__/ConnectionUI.test.tsx
@@ -42,9 +42,13 @@ vi.mock('@/hooks/intelligence', () => ({
 }));
 
 describe('ConnectionsOverviewTable Interações e Acessibilidade', () => {
-  const useAuthMock = vi.mocked(useAuth);
-  const useConnectionsOverviewMock = vi.mocked(useConnectionsOverview);
-  const useConnectionTesterMock = vi.mocked(useConnectionTester);
+  const useAuthMock = vi.mocked(useAuth) as unknown as ReturnType<typeof vi.fn>;
+  const useConnectionsOverviewMock = vi.mocked(useConnectionsOverview) as unknown as ReturnType<
+    typeof vi.fn
+  >;
+  const useConnectionTesterMock = vi.mocked(useConnectionTester) as unknown as ReturnType<
+    typeof vi.fn
+  >;
 
   const mockRows = [
     {
@@ -66,7 +70,7 @@ describe('ConnectionsOverviewTable Interações e Acessibilidade', () => {
       loading: false,
       refresh: vi.fn(),
     });
-    useConnectionTesterMock.mockReturnValue({ test: vi.fn(), testing: false });
+    useConnectionTesterMock.mockReturnValue({ test: vi.fn(), isTesting: false });
   });
 
   it('deve permitir focar e navegar nos botões de ação via teclado', () => {
diff --git a/src/components/admin/connections/__tests__/ConnectionsOverviewTable.test.tsx b/src/components/admin/connections/__tests__/ConnectionsOverviewTable.test.tsx
index 4b7e16e65..dc9420847 100644
--- a/src/components/admin/connections/__tests__/ConnectionsOverviewTable.test.tsx
+++ b/src/components/admin/connections/__tests__/ConnectionsOverviewTable.test.tsx
@@ -37,11 +37,17 @@ vi.mock('@/hooks/intelligence', () => ({
 }));
 
 describe('ConnectionsOverviewTable Regression Tests', () => {
-  const useAuthMock = vi.mocked(useAuth);
-  const useConnectionsOverviewMock = vi.mocked(useConnectionsOverview);
-  const useConnectionTesterMock = vi.mocked(useConnectionTester);
-  const useConsecutiveFailuresMock = vi.mocked(useConsecutiveFailures);
-  const useSecretsManagerMock = vi.mocked(useSecretsManager);
+  const useAuthMock = vi.mocked(useAuth) as unknown as ReturnType<typeof vi.fn>;
+  const useConnectionsOverviewMock = vi.mocked(useConnectionsOverview) as unknown as ReturnType<
+    typeof vi.fn
+  >;
+  const useConnectionTesterMock = vi.mocked(useConnectionTester) as unknown as ReturnType<
+    typeof vi.fn
+  >;
+  const useConsecutiveFailuresMock = vi.mocked(useConsecutiveFailures) as unknown as ReturnType<
+    typeof vi.fn
+  >;
+  const useSecretsManagerMock = vi.mocked(useSecretsManager) as unknown as ReturnType<typeof vi.fn>;
 
   const mockRows = [
     {
@@ -84,7 +90,7 @@ describe('ConnectionsOverviewTable Regression Tests', () => {
     });
     useConnectionTesterMock.mockReturnValue({
       test: vi.fn(),
-      testing: false,
+      isTesting: false,
     });
     useConsecutiveFailuresMock.mockReturnValue({
       map: new Map(),
diff --git a/src/lib/personalization/selectors.ts b/src/lib/personalization/selectors.ts
index 0a821aacb..a8c33c131 100644
--- a/src/lib/personalization/selectors.ts
+++ b/src/lib/personalization/selectors.ts
@@ -34,27 +34,28 @@ export function selectBestTable(
 
   // Filtrar por nome da técnica
   if (criteria.techniqueName) {
-    const byName = candidates.filter((t) =>
-      t.techniqueName.toLowerCase().includes(criteria.techniqueName.toLowerCase()),
-    );
+    const techniqueName = criteria.techniqueName.toLowerCase();
+    const byName = candidates.filter((t) => t.techniqueName.toLowerCase().includes(techniqueName));
     if (byName.length > 0) candidates = byName;
   }
 
   // Filtrar por código da técnica
   if (criteria.techniqueCode) {
+    const techniqueCode = criteria.techniqueCode.toLowerCase();
     const byCode = candidates.filter(
       (t) =>
-        t.tableCode.toLowerCase().includes(criteria.techniqueCode.toLowerCase()) ||
-        criteria.techniqueCode.toLowerCase().includes(t.tableCode.toLowerCase()),
+        t.tableCode.toLowerCase().includes(techniqueCode) ||
+        techniqueCode.includes(t.tableCode.toLowerCase()),
     );
     if (byCode.length > 0) candidates = byCode;
   }
 
   // Ordenar por número de cores (preferir a que atende exatamente)
   if (criteria.colors) {
+    const colors = criteria.colors;
     candidates.sort((a, b) => {
-      const aFits = a.maxColors !== null && a.maxColors >= criteria.colors;
-      const bFits = b.maxColors !== null && b.maxColors >= criteria.colors;
+      const aFits = a.maxColors !== null && a.maxColors >= colors;
+      const bFits = b.maxColors !== null && b.maxColors >= colors;
 
       if (aFits && !bFits) return -1;
       if (!aFits && bFits) return 1;
@@ -71,10 +72,12 @@ export function selectBestTable(
 
   // Filtrar por dimensões
   if (criteria.widthCm && criteria.heightCm) {
+    const widthCm = criteria.widthCm;
+    const heightCm = criteria.heightCm;
     const byDimensions = candidates.filter(
       (t) =>
-        (t.maxWidthCm === null || t.maxWidthCm >= criteria.widthCm) &&
-        (t.maxHeightCm === null || t.maxHeightCm >= criteria.heightCm),
+        (t.maxWidthCm === null || t.maxWidthCm >= widthCm) &&
+        (t.maxHeightCm === null || t.maxHeightCm >= heightCm),
     );
     if (byDimensions.length > 0) candidates = byDimensions;
   }

From 66407387bdfd2b078f4cb1e025caead6f7ac8318 Mon Sep 17 00:00:00 2001
From: adm01-debug <adm01@promobrindes.com.br>
Date: Sat, 23 May 2026 18:43:04 -0300
Subject: [PATCH 3/4] fix(ci): SupplierRiskPanel + CommercialIntelligencePage
 props nao suportadas (lote 3/4)

---
 .../inventory/SupplierRiskPanel.tsx           | 199 ++++++++++-------
 src/pages/bi/CommercialIntelligencePage.tsx   | 203 ++++++++++--------
 2 files changed, 238 insertions(+), 164 deletions(-)

diff --git a/src/components/inventory/SupplierRiskPanel.tsx b/src/components/inventory/SupplierRiskPanel.tsx
index 8b85e706e..207e710ca 100644
--- a/src/components/inventory/SupplierRiskPanel.tsx
+++ b/src/components/inventory/SupplierRiskPanel.tsx
@@ -3,24 +3,18 @@
  * v4: Refactored into smaller components (SRP compliance).
  * Sub-components: risk/ProductRiskDetail, risk/RiskKpi, risk/RiskTooltip, risk/types
  */
-import { useMemo, useState, useEffect, useRef } from "react";
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import {
-  AlertTriangle,
-  Package,
-  Clock,
-  Search,
-  ShieldAlert,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { type ProductStockSummary } from "@/types/stock";
-import { ProductRiskDetail } from "./risk/ProductRiskDetail";
-import { deriveSeverity, SEVERITY_ORDER, type RiskProduct, type RiskSeverity } from "./risk/types";
+import { useMemo, useState, useEffect, useRef } from 'react';
+import { format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { AlertTriangle, Package, Clock, Search, ShieldAlert } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { type ProductStockSummary } from '@/types/stock';
+import { ProductRiskDetail } from './risk/ProductRiskDetail';
+import { deriveSeverity, SEVERITY_ORDER, type RiskProduct, type RiskSeverity } from './risk/types';
 
 // ---------- Main Panel ----------
 
@@ -44,7 +38,7 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
   // Derive risk products
   const riskProducts = useMemo<RiskProduct[]>(() => {
     return products
-      .map(p => ({
+      .map((p) => ({
         id: p.productId,
         name: p.productName,
         sku: p.productSku,
@@ -65,7 +59,9 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
 
   // Global counts (for filter buttons — unaffected by search/filter)
   const globalCounts = useMemo(() => {
-    let critical = 0, warning = 0, ok = 0;
+    let critical = 0,
+      warning = 0,
+      ok = 0;
     for (const p of riskProducts) {
       if (p.severity === 'critical') critical++;
       else if (p.severity === 'warning') warning++;
@@ -79,17 +75,21 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
     let result = riskProducts;
     if (debouncedSearch) {
       const q = debouncedSearch.toLowerCase();
-      result = result.filter(p => p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q));
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q),
+      );
     }
     if (severityFilter !== 'all') {
-      result = result.filter(p => p.severity === severityFilter);
+      result = result.filter((p) => p.severity === severityFilter);
     }
     return result;
   }, [riskProducts, debouncedSearch, severityFilter]);
 
   // P5 fix: single-loop filtered counts
   const filteredCounts = useMemo(() => {
-    let critical = 0, warning = 0, ok = 0;
+    let critical = 0,
+      warning = 0,
+      ok = 0;
     for (const p of filteredProducts) {
       if (p.severity === 'critical') critical++;
       else if (p.severity === 'warning') warning++;
@@ -101,11 +101,11 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
   // B7 fix: use callback setter to avoid re-render loop
   useEffect(() => {
     if (filteredProducts.length === 0) {
-      setSelectedProductId(prev => prev === null ? prev : null);
+      setSelectedProductId((prev) => (prev === null ? prev : null));
       return;
     }
-    setSelectedProductId(prev => {
-      if (prev && filteredProducts.some(p => p.id === prev)) return prev;
+    setSelectedProductId((prev) => {
+      if (prev && filteredProducts.some((p) => p.id === prev)) return prev;
       return filteredProducts[0].id;
     });
   }, [filteredProducts]);
@@ -137,28 +137,28 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
     }
   }, [products]);
 
-  const selected = filteredProducts.find(p => p.id === selectedProductId) ?? null;
+  const selected = filteredProducts.find((p) => p.id === selectedProductId) ?? null;
 
   // Empty state
   if (!products.length) {
     return (
       <Card>
         <CardHeader className="pb-3">
-          <CardTitle className="text-lg flex items-center gap-2">
-            <div className="h-8 w-8 rounded-full bg-warning/10 flex items-center justify-center">
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-warning/10">
               <ShieldAlert className="h-4 w-4 text-warning" aria-hidden="true" />
             </div>
             Risco de Ruptura no Fornecedor
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
-            <div className="h-14 w-14 rounded-full bg-muted/50 flex items-center justify-center">
+          <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
+            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-muted/50">
               <Package className="h-7 w-7 text-muted-foreground/40" />
             </div>
             <div>
-              <p className="font-semibold text-foreground mb-1">Sem dados disponíveis</p>
-              <p className="text-sm text-muted-foreground max-w-xs">
+              <p className="mb-1 font-semibold text-foreground">Sem dados disponíveis</p>
+              <p className="max-w-xs text-sm text-muted-foreground">
                 Carregue os dados de estoque para visualizar a análise de risco por fornecedor.
               </p>
             </div>
@@ -171,25 +171,29 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
   return (
     <Card>
       <CardHeader className="pb-3">
-        <div className="flex items-center justify-between flex-wrap gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
           <div>
-            <CardTitle className="text-lg flex items-center gap-2">
-              <div className="h-8 w-8 rounded-full bg-warning/10 flex items-center justify-center">
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-warning/10">
                 <ShieldAlert className="h-4 w-4 text-warning" aria-hidden="true" />
               </div>
               Risco de Ruptura no Fornecedor
               {globalCounts.critical > 0 && (
-                <Badge variant="destructive" className="text-[10px] animate-pulse">
+                <Badge variant="destructive" className="animate-pulse text-[10px]">
                   {globalCounts.critical} crítico{globalCounts.critical > 1 ? 's' : ''}
                 </Badge>
               )}
             </CardTitle>
             <CardDescription className="mt-1">
-              Monitore produtos com risco de acabar no fornecedor — antecipe compras e evite perder vendas
+              Monitore produtos com risco de acabar no fornecedor — antecipe compras e evite perder
+              vendas
             </CardDescription>
           </div>
           {lastUpdated && (
-            <span className="text-[10px] text-muted-foreground flex items-center gap-1" aria-label={`Última atualização: ${lastUpdated}`}>
+            <span
+              className="flex items-center gap-1 text-[10px] text-muted-foreground"
+              aria-label={`Última atualização: ${lastUpdated}`}
+            >
               <Clock className="h-3 w-3" aria-hidden="true" />
               {lastUpdated}
             </span>
@@ -197,39 +201,49 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
         </div>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-4">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-[280px_1fr]">
           {/* Product list */}
           <div className="space-y-2">
             <div className="relative">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+              <Search
+                className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground"
+                aria-hidden="true"
+              />
               <Input
                 placeholder="Buscar produto ou SKU..."
                 value={searchInput}
                 onChange={(e) => setSearchInput(e.target.value)}
-                className="pl-8 h-8 text-xs"
+                className="h-8 pl-8 text-xs"
                 aria-label="Buscar produto no painel de risco"
               />
             </div>
 
             {/* Severity filter buttons */}
-            <div className="flex gap-1 flex-wrap" role="radiogroup" aria-label="Filtrar por severidade">
-              {([
+            <div
+              className="flex flex-wrap gap-1"
+              role="radiogroup"
+              aria-label="Filtrar por severidade"
+            >
+              {[
                 { value: 'all' as const, label: 'Todos', count: riskProducts.length },
                 { value: 'critical' as const, label: 'Críticos', count: globalCounts.critical },
                 { value: 'warning' as const, label: 'Atenção', count: globalCounts.warning },
                 { value: 'ok' as const, label: 'OK', count: globalCounts.ok },
-              ]).map(opt => (
+              ].map((opt) => (
                 <button
                   key={opt.value}
                   onClick={() => setSeverityFilter(opt.value)}
                   className={cn(
-                    "text-[9px] px-2 py-0.5 rounded-full transition-colors",
+                    'rounded-full px-2 py-0.5 text-[9px] transition-colors',
                     severityFilter === opt.value
-                      ? opt.value === 'critical' ? 'bg-destructive/15 text-destructive'
-                        : opt.value === 'warning' ? 'bg-warning/15 text-warning'
-                        : opt.value === 'ok' ? 'bg-primary/15 text-primary'
-                        : 'bg-primary/15 text-primary'
-                      : 'text-muted-foreground hover:bg-muted/50'
+                      ? opt.value === 'critical'
+                        ? 'bg-destructive/15 text-destructive'
+                        : opt.value === 'warning'
+                          ? 'bg-warning/15 text-warning'
+                          : opt.value === 'ok'
+                            ? 'bg-primary/15 text-primary'
+                            : 'bg-primary/15 text-primary'
+                      : 'text-muted-foreground hover:bg-muted/50',
                   )}
                   aria-checked={severityFilter === opt.value}
                   role="radio"
@@ -242,17 +256,23 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
             {/* Virtualized list */}
             <div
               ref={listParentRef}
-              className="h-[250px] sm:h-[300px] overflow-auto"
+              className="h-[250px] overflow-auto sm:h-[300px]"
               role="listbox"
               aria-label="Lista de produtos com risco"
             >
               {filteredProducts.length === 0 ? (
-                <p className="text-xs text-muted-foreground text-center py-4">
+                <p className="py-4 text-center text-xs text-muted-foreground">
                   {debouncedSearch ? 'Nenhum produto encontrado' : 'Nenhum produto nesta categoria'}
                 </p>
               ) : (
-                <div style={{ height: `${virtualizer.getTotalSize()}px`, width: '100%', position: 'relative' }}>
-                  {virtualizer.getVirtualItems().map(virtualRow => {
+                <div
+                  style={{
+                    height: `${virtualizer.getTotalSize()}px`,
+                    width: '100%',
+                    position: 'relative',
+                  }}
+                >
+                  {virtualizer.getVirtualItems().map((virtualRow) => {
                     const product = filteredProducts[virtualRow.index];
                     return (
                       <div
@@ -271,31 +291,42 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
                           role="option"
                           aria-selected={selectedProductId === product.id}
                           className={cn(
-                            "w-full text-left p-2 rounded-lg text-xs transition-colors",
+                            'w-full rounded-lg p-2 text-left text-xs transition-colors',
                             selectedProductId === product.id
-                              ? "bg-primary/10 border border-primary/20"
-                              : "hover:bg-muted/50"
+                              ? 'border border-primary/20 bg-primary/10'
+                              : 'hover:bg-muted/50',
                           )}
                         >
                           <div className="flex items-center justify-between gap-1">
                             <div className="min-w-0 flex-1">
-                              <span className="font-medium truncate block">{product.name}</span>
-                              <span className="text-[9px] text-muted-foreground">{product.sku}</span>
+                              <span className="block truncate font-medium">{product.name}</span>
+                              <span className="text-[9px] text-muted-foreground">
+                                {product.sku}
+                              </span>
                             </div>
-                            <div className="flex items-center gap-1.5 shrink-0">
-                              <span className="text-[9px] text-muted-foreground">{product.currentStock} un</span>
+                            <div className="flex shrink-0 items-center gap-1.5">
+                              <span className="text-[9px] text-muted-foreground">
+                                {product.currentStock} un
+                              </span>
                               <Badge
                                 variant="outline"
                                 className={cn(
-                                  "text-[9px] px-1.5 py-0",
-                                  product.severity === 'critical' ? 'bg-destructive/15 text-destructive border-destructive/30' :
-                                  product.severity === 'warning' ? 'bg-warning/15 text-warning border-warning/30' :
-                                  'bg-primary/10 text-primary border-primary/20'
+                                  'px-1.5 py-0 text-[9px]',
+                                  product.severity === 'critical'
+                                    ? 'border-destructive/30 bg-destructive/15 text-destructive'
+                                    : product.severity === 'warning'
+                                      ? 'border-warning/30 bg-warning/15 text-warning'
+                                      : 'border-primary/20 bg-primary/10 text-primary',
                                 )}
                               >
-                                {product.severity === 'critical' && <AlertTriangle className="h-2.5 w-2.5 mr-0.5" />}
-                                {product.severity === 'critical' ? 'Crítico' :
-                                 product.severity === 'warning' ? 'Atenção' : 'OK'}
+                                {product.severity === 'critical' && (
+                                  <AlertTriangle className="mr-0.5 h-2.5 w-2.5" />
+                                )}
+                                {product.severity === 'critical'
+                                  ? 'Crítico'
+                                  : product.severity === 'warning'
+                                    ? 'Atenção'
+                                    : 'OK'}
                               </Badge>
                             </div>
                           </div>
@@ -308,16 +339,28 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
             </div>
 
             {/* Summary — reflects filtered products */}
-            <div className="grid grid-cols-3 gap-1.5 pt-2 border-t border-border">
-              <div className="text-center p-1.5 rounded bg-destructive/10" role="status" aria-label={`${filteredCounts.critical} produtos críticos`}>
+            <div className="grid grid-cols-3 gap-1.5 border-t border-border pt-2">
+              <div
+                className="rounded bg-destructive/10 p-1.5 text-center"
+                role="status"
+                aria-label={`${filteredCounts.critical} produtos críticos`}
+              >
                 <p className="text-lg font-bold text-destructive">{filteredCounts.critical}</p>
                 <p className="text-[9px] text-destructive">Críticos</p>
               </div>
-              <div className="text-center p-1.5 rounded bg-warning/10" role="status" aria-label={`${filteredCounts.warning} produtos em atenção`}>
+              <div
+                className="rounded bg-warning/10 p-1.5 text-center"
+                role="status"
+                aria-label={`${filteredCounts.warning} produtos em atenção`}
+              >
                 <p className="text-lg font-bold text-warning">{filteredCounts.warning}</p>
                 <p className="text-[9px] text-warning">Atenção</p>
               </div>
-              <div className="text-center p-1.5 rounded bg-primary/10" role="status" aria-label={`${filteredCounts.ok} produtos OK`}>
+              <div
+                className="rounded bg-primary/10 p-1.5 text-center"
+                role="status"
+                aria-label={`${filteredCounts.ok} produtos OK`}
+              >
                 <p className="text-lg font-bold text-primary">{filteredCounts.ok}</p>
                 <p className="text-[9px] text-primary">OK</p>
               </div>
@@ -325,15 +368,11 @@ export function SupplierRiskPanel({ products }: SupplierRiskPanelProps) {
           </div>
 
           {/* Detail panel */}
-          <div className="border-t lg:border-t-0 lg:border-l border-border pt-4 lg:pt-0 lg:pl-4">
+          <div className="border-t border-border pt-4 lg:border-l lg:border-t-0 lg:pl-4 lg:pt-0">
             {selected ? (
-              <ProductRiskDetail
-                productId={selected.id}
-                productName={selected.name}
-                productSku={selected.sku}
-              />
+              <ProductRiskDetail productId={selected.id} productName={selected.name} />
             ) : (
-              <div className="flex items-center justify-center h-full text-sm text-muted-foreground py-8">
+              <div className="flex h-full items-center justify-center py-8 text-sm text-muted-foreground">
                 Selecione um produto para ver os detalhes de risco
               </div>
             )}
diff --git a/src/pages/bi/CommercialIntelligencePage.tsx b/src/pages/bi/CommercialIntelligencePage.tsx
index 7dca44db3..713712a73 100644
--- a/src/pages/bi/CommercialIntelligencePage.tsx
+++ b/src/pages/bi/CommercialIntelligencePage.tsx
@@ -1,16 +1,19 @@
-import { useState } from "react";
-import { PageSEO } from "@/components/seo/PageSEO";
-import { IntelligenceFilterBar, type IntelligenceFilters } from "@/components/intelligence/IntelligenceFilterBar";
-import { IntelligenceKPICards } from "@/components/intelligence/IntelligenceKPICards";
-import { MarketIntelligenceInsightsCard } from "@/components/intelligence/MarketIntelligenceInsightsCard";
-import { MarketIntelligenceChart } from "@/components/intelligence/MarketIntelligenceChart";
-import { SalesOverviewChart } from "@/components/intelligence/SalesOverviewChart";
-import { TrendingProducts } from "@/components/intelligence/TrendingProducts";
-import { ProductRankingSearch } from "@/components/intelligence/ProductRankingSearch";
-import { CategoryRanking } from "@/components/intelligence/CategoryRanking";
-import { SupplierSales } from "@/components/intelligence/SupplierSales";
-import { Brain, Clock } from "lucide-react";
-import { useDebouncedFilters } from "@/hooks/common";
+import { useState } from 'react';
+import { PageSEO } from '@/components/seo/PageSEO';
+import {
+  IntelligenceFilterBar,
+  type IntelligenceFilters,
+} from '@/components/intelligence/IntelligenceFilterBar';
+import { IntelligenceKPICards } from '@/components/intelligence/IntelligenceKPICards';
+import { MarketIntelligenceInsightsCard } from '@/components/intelligence/MarketIntelligenceInsightsCard';
+import { MarketIntelligenceChart } from '@/components/intelligence/MarketIntelligenceChart';
+import { SalesOverviewChart } from '@/components/intelligence/SalesOverviewChart';
+import { TrendingProducts } from '@/components/intelligence/TrendingProducts';
+import { ProductRankingSearch } from '@/components/intelligence/ProductRankingSearch';
+import { CategoryRanking } from '@/components/intelligence/CategoryRanking';
+import { SupplierSales } from '@/components/intelligence/SupplierSales';
+import { Brain, Clock } from 'lucide-react';
+import { useDebouncedFilters } from '@/hooks/common';
 
 export default function CommercialIntelligencePage() {
   const [lastRefresh] = useState<Date>(new Date());
@@ -30,91 +33,123 @@ export default function CommercialIntelligencePage() {
 
   const formatRelative = (d: Date) => {
     const diff = Math.round((Date.now() - d.getTime()) / 1000);
-    if (diff < 60) return "agora";
+    if (diff < 60) return 'agora';
     if (diff < 3600) return `há ${Math.floor(diff / 60)} min`;
     return `há ${Math.floor(diff / 3600)}h`;
   };
 
   return (
-      <>
-        <PageSEO
-          title="Inteligência de Mercado"
-          description="Painel estratégico com insights de mercado para decisões comerciais."
-          path="/inteligencia-comercial"
-          noIndex
-        />
-        <div className="w-full max-w-[1920px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-3 sm:py-4 space-y-3 sm:space-y-4 pb-24 md:pb-6 animate-fade-in">
-          {/* Header */}
-          <div className="flex items-center gap-3 flex-wrap">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600 to-indigo-700 flex items-center justify-center shadow-lg shadow-violet-500/20">
-              <Brain className="h-5 w-5 text-primary-foreground" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <h1 data-testid="page-title-inteligencia-mercado" className="font-display text-xl font-bold text-foreground">Inteligência de Mercado</h1>
-              <p className="text-sm text-muted-foreground">Produtos & Fornecedores · comportamento do mercado + vendas internas</p>
-            </div>
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Clock className="h-3.5 w-3.5" />
-              <span>Atualizado {formatRelative(lastRefresh)}</span>
-            </div>
+    <>
+      <PageSEO
+        title="Inteligência de Mercado"
+        description="Painel estratégico com insights de mercado para decisões comerciais."
+        path="/inteligencia-comercial"
+        noIndex
+      />
+      <div className="mx-auto w-full max-w-[1920px] animate-fade-in space-y-3 px-3 py-3 pb-24 sm:space-y-4 sm:px-4 sm:py-4 md:pb-6 lg:px-6 xl:px-8">
+        {/* Header */}
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-600 to-indigo-700 shadow-lg shadow-violet-500/20">
+            <Brain className="h-5 w-5 text-primary-foreground" />
           </div>
-
-          {/* Filters — sticky no scroll · UI controlada por rawFilters (sem latência), refetch debounced */}
-          <div className="sticky top-[calc(var(--header-h,56px)+var(--breadcrumb-h,0px))] z-20 -mx-3 sm:-mx-4 lg:-mx-6 xl:-mx-8 px-3 sm:px-4 lg:px-6 xl:px-8 py-2 bg-background/85 backdrop-blur-md border-b border-border/40">
-            <IntelligenceFilterBar filters={rawFilters} onFiltersChange={setFilters} />
+          <div className="min-w-0 flex-1">
+            <h1
+              data-testid="page-title-inteligencia-mercado"
+              className="font-display text-xl font-bold text-foreground"
+            >
+              Inteligência de Mercado
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Produtos & Fornecedores · comportamento do mercado + vendas internas
+            </p>
           </div>
-
-          {/* KPI Summary */}
-          <div className="animate-fade-in" style={{ animationDelay: "50ms" }}>
-            <IntelligenceKPICards
-              days={filters.days}
-              categoryId={filters.categoryId}
-              supplierId={filters.supplierId}
-              productId={filters.productId}
-              categoryName={filters.categoryName}
-              supplierName={filters.supplierName}
-            />
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Clock className="h-3.5 w-3.5" />
+            <span>Atualizado {formatRelative(lastRefresh)}</span>
           </div>
+        </div>
 
-          {/* AI Insights */}
-          <div className="animate-fade-in" style={{ animationDelay: "100ms" }}>
-            <MarketIntelligenceInsightsCard
-              days={filters.days}
-              categoryId={filters.categoryId}
-              supplierId={filters.supplierId}
-              productId={filters.productId}
-              categoryName={filters.categoryName}
-              supplierName={filters.supplierName}
-              productName={filters.productName}
-            />
-          </div>
+        {/* Filters — sticky no scroll · UI controlada por rawFilters (sem latência), refetch debounced */}
+        <div className="sticky top-[calc(var(--header-h,56px)+var(--breadcrumb-h,0px))] z-20 -mx-3 border-b border-border/40 bg-background/85 px-3 py-2 backdrop-blur-md sm:-mx-4 sm:px-4 lg:-mx-6 lg:px-6 xl:-mx-8 xl:px-8">
+          <IntelligenceFilterBar filters={rawFilters} onFiltersChange={setFilters} />
+        </div>
 
-          {/* 1. Market Intelligence */}
-          <div className="animate-fade-in" style={{ animationDelay: "150ms" }}>
-            <MarketIntelligenceChart days={filters.days} supplierId={filters.supplierId} productId={filters.productId} />
-          </div>
+        {/* KPI Summary */}
+        <div className="animate-fade-in" style={{ animationDelay: '50ms' }}>
+          <IntelligenceKPICards
+            days={filters.days}
+            categoryId={filters.categoryId}
+            supplierId={filters.supplierId}
+            productId={filters.productId}
+            categoryName={filters.categoryName}
+            supplierName={filters.supplierName}
+          />
+        </div>
 
-          {/* 2. Product Ranking Search — main feature */}
-          <div className="animate-fade-in" style={{ animationDelay: "200ms" }}>
-            <ProductRankingSearch />
-          </div>
+        {/* AI Insights */}
+        <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
+          <MarketIntelligenceInsightsCard
+            days={filters.days}
+            categoryId={filters.categoryId}
+            supplierId={filters.supplierId}
+            productId={filters.productId}
+            categoryName={filters.categoryName}
+            supplierName={filters.supplierName}
+            productName={filters.productName}
+          />
+        </div>
 
-          {/* 3. Ranking de Categorias */}
-          <div className="animate-fade-in" style={{ animationDelay: "250ms" }}>
-            <CategoryRanking days={filters.days} categoryId={filters.categoryId} supplierId={filters.supplierId} productId={filters.productId} categoryName={filters.categoryName} />
-          </div>
+        {/* 1. Market Intelligence */}
+        <div className="animate-fade-in" style={{ animationDelay: '150ms' }}>
+          <MarketIntelligenceChart
+            days={filters.days}
+            supplierId={filters.supplierId}
+            productId={filters.productId}
+          />
+        </div>
 
-          {/* 4+5. Produtos em Alta + Vendas por Fornecedor */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in" style={{ animationDelay: "300ms" }}>
-            <TrendingProducts days={filters.days} categoryId={filters.categoryId} supplierId={filters.supplierId} productId={filters.productId} categoryName={filters.categoryName} />
-            <SupplierSales days={filters.days} categoryId={filters.categoryId} supplierId={filters.supplierId} productId={filters.productId} categoryName={filters.categoryName} />
-          </div>
+        {/* 2. Product Ranking Search — main feature */}
+        <div className="animate-fade-in" style={{ animationDelay: '200ms' }}>
+          <ProductRankingSearch />
+        </div>
 
-          {/* 5. Vendas Internas */}
-          <div className="animate-fade-in" style={{ animationDelay: "350ms" }}>
-            <SalesOverviewChart days={filters.days} productId={filters.productId} />
-          </div>
+        {/* 3. Ranking de Categorias */}
+        <div className="animate-fade-in" style={{ animationDelay: '250ms' }}>
+          <CategoryRanking
+            days={filters.days}
+            categoryId={filters.categoryId}
+            supplierId={filters.supplierId}
+            productId={filters.productId}
+            categoryName={filters.categoryName}
+          />
+        </div>
+
+        {/* 4+5. Produtos em Alta + Vendas por Fornecedor */}
+        <div
+          className="grid animate-fade-in grid-cols-1 gap-6 lg:grid-cols-2"
+          style={{ animationDelay: '300ms' }}
+        >
+          <TrendingProducts
+            days={filters.days}
+            categoryId={filters.categoryId}
+            supplierId={filters.supplierId}
+            productId={filters.productId}
+            categoryName={filters.categoryName}
+          />
+          <SupplierSales
+            days={filters.days}
+            categoryId={filters.categoryId}
+            supplierId={filters.supplierId}
+            productId={filters.productId}
+            categoryName={filters.categoryName}
+          />
+        </div>
+
+        {/* 5. Vendas Internas */}
+        <div className="animate-fade-in" style={{ animationDelay: '350ms' }}>
+          <SalesOverviewChart days={filters.days} />
         </div>
-      </>
+      </div>
+    </>
   );
 }

From b305c3a503471f38993f7b73c639e531174e949e Mon Sep 17 00:00:00 2001
From: adm01-debug <adm01@promobrindes.com.br>
Date: Sat, 23 May 2026 18:44:55 -0300
Subject: [PATCH 4/4] fix(ci): SecretsManagerHealthPanel + QuoteViewPage (lote
 4/4 - final)

---
 .../admin/connections/SecretsManagerHealthPanel.tsx           | 4 +++-
 src/pages/quotes/QuoteViewPage.tsx                            | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/admin/connections/SecretsManagerHealthPanel.tsx b/src/components/admin/connections/SecretsManagerHealthPanel.tsx
index d51220960..750bfc35d 100644
--- a/src/components/admin/connections/SecretsManagerHealthPanel.tsx
+++ b/src/components/admin/connections/SecretsManagerHealthPanel.tsx
@@ -275,7 +275,9 @@ export function SecretsManagerHealthPanel({ className }: { className?: string })
           {boot?.requestId && (
             <button
               type="button"
-              onClick={() => copyToClipboard(boot.requestId, 'request_id copiado')}
+              onClick={() =>
+                boot.requestId && copyToClipboard(boot.requestId, 'request_id copiado')
+              }
               className="ml-auto inline-flex items-center gap-1 font-mono text-[11px] text-muted-foreground hover:text-foreground"
               title="Copiar request_id para correlacionar com edge logs"
             >
diff --git a/src/pages/quotes/QuoteViewPage.tsx b/src/pages/quotes/QuoteViewPage.tsx
index 092fd89d7..dfff54863 100644
--- a/src/pages/quotes/QuoteViewPage.tsx
+++ b/src/pages/quotes/QuoteViewPage.tsx
@@ -208,7 +208,7 @@ export default function QuoteViewPage() {
                         await supabase
                           // rls-allow: lookup por id; RLS valida ownership
                           .from('quotes')
-                          .update({ status: 'pending' } as Record<string, unknown>)
+                          .update({ status: 'pending' })
                           .eq('id', quote.id);
                         await logQuoteHistory(
                           quote.id,
@@ -253,7 +253,7 @@ export default function QuoteViewPage() {
                       <SheetTitle>Histórico de Alterações</SheetTitle>
                     </SheetHeader>
                     <div className="mt-6">
-                      <QuoteHistoryPanel quoteId={quote.id} />
+                      <QuoteHistoryPanel quoteId={quote.id ?? ''} />
                     </div>
                   </SheetContent>
                 </Sheet>