From 54ef63f5c729e1c5d40b4468b744afe4e3c26c71 Mon Sep 17 00:00:00 2001
From: julian <julian@jcsinformatica.com.br>
Date: Wed, 22 Jul 2026 20:15:18 +0000
Subject: [PATCH] feat(web): sugestao de comprados anteriormente fechada por
 padrao com banner de destaque

Painel do historico do cliente no lancamento agora abre sempre fechado,
com banner ambar chamativo ("Este cliente ja comprou N produtos com
voce") e botao Ver produtos - o rep le e escolhe abrir, em vez de a
lista ocupar a tela direto.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/cockpits/rep/NewOrderPage.tsx | 55 ++++++++++++++++------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/cockpits/rep/NewOrderPage.tsx b/apps/web/src/cockpits/rep/NewOrderPage.tsx
index 0de1e01..f1e4116 100644
--- a/apps/web/src/cockpits/rep/NewOrderPage.tsx
+++ b/apps/web/src/cockpits/rep/NewOrderPage.tsx
@@ -29,9 +29,12 @@ import {
   CheckCircleOutlined,
   CloseOutlined,
   DeleteOutlined,
+  DownOutlined,
+  HistoryOutlined,
   PlusOutlined,
   SearchOutlined,
   ShoppingCartOutlined,
+  UpOutlined,
   UserOutlined,
 } from '@ant-design/icons';
 import { useNavigate, useSearch } from '@tanstack/react-router';
@@ -768,7 +771,8 @@ function ClientHistoryPanel({
 }) {
   const screens = useBreakpoint();
   const isMobile = !screens.md;
-  const [collapsed, setCollapsed] = useState(false);
+  // Sempre fecha ao abrir a tela — o banner chamativo convida o rep a expandir
+  const [collapsed, setCollapsed] = useState(true);
   const [qtys, setQtys] = useState<Record<number, number>>({});
 
   const { data: produtos = [], isLoading } = useClientTopProdutos(idCliente, 15);
@@ -929,40 +933,61 @@ function ClientHistoryPanel({
 
   return (
     <div style={{ marginTop: 16 }}>
+      {/* Banner âmbar de destaque — fechado por padrão, convida o rep a abrir */}
       <div
         style={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          marginBottom: 8,
+          gap: 10,
+          padding: '10px 14px',
+          background: '#FFF7E6',
+          border: '1px solid #FFD591',
+          borderRadius: collapsed ? 8 : '8px 8px 0 0',
           cursor: 'pointer',
           userSelect: 'none',
         }}
         onClick={() => setCollapsed((c) => !c)}
       >
-        <Text
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+          <HistoryOutlined style={{ color: '#D46B08', fontSize: 18, flexShrink: 0 }} />
+          <div style={{ minWidth: 0 }}>
+            <Text
+              strong
+              style={{ color: '#873800', fontSize: 13, display: 'block', lineHeight: 1.3 }}
+            >
+              Este cliente já comprou {produtos.length} produto{produtos.length !== 1 ? 's' : ''}{' '}
+              com você
+            </Text>
+            <Text style={{ color: '#AD6800', fontSize: 11 }}>
+              Veja o histórico e repita itens no pedido com um clique
+            </Text>
+          </div>
+        </div>
+        <Button
+          size="small"
           style={{
-            fontSize: 11,
-            fontWeight: 700,
-            letterSpacing: '0.08em',
-            textTransform: 'uppercase',
-            color: '#64748B',
+            borderColor: '#FFD591',
+            color: '#D46B08',
+            background: '#fff',
+            fontWeight: 600,
+            flexShrink: 0,
           }}
+          icon={collapsed ? <DownOutlined /> : <UpOutlined />}
+          iconPosition="end"
         >
-          Comprados anteriormente · {produtos.length} produto{produtos.length !== 1 ? 's' : ''}
-        </Text>
-        <Button type="link" size="small" style={{ padding: 0, fontSize: 12 }}>
-          {collapsed ? 'exibir' : 'ocultar'}
+          {collapsed ? 'Ver produtos' : 'Ocultar'}
         </Button>
       </div>
 
       {!collapsed && (
         <div
           style={{
-            border: '1px solid #EBF0F5',
-            borderRadius: 8,
+            border: '1px solid #FFD591',
+            borderTop: 'none',
+            borderRadius: '0 0 8px 8px',
             overflow: 'hidden',
-            background: '#FAFBFC',
+            background: '#FFFDF7',
           }}
         >
           <Table<TopProduto>