feat(api,web): logo da empresa na impressao e cabecalho A4 compacto

- Tabela sar.config_empresa (logo em data URL por empresa matriz) com
  migration idempotente, espelho no schema SQL e GRANT no provision
- PUT /catalog/company/logo (gerente/admin) e logoBase64 no GET
  /catalog/company - vale para a impressao de todos os representantes
- Nova tela /ger/config "Configuracoes" com upload/preview/remocao do
  logo (PNG/JPG/WebP ate 500KB)
- Cabecalho da impressao redesenhado: logo a esquerda, dados da empresa
  condensados em 3 linhas, numero/status/data compactos a direita -
  ocupa ~metade da altura anterior no A4

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/web/src/cockpits/ger/GerConfigPage.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { Button, Card, Flex, Popconfirm, Skeleton, Typography, Upload, message } from 'antd';
+import type { UploadProps } from 'antd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faImage, faTrash, faUpload } from '@fortawesome/free-solid-svg-icons';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCompany } from '../../lib/queries/company';
+import { apiFetch } from '../../lib/api-client';
+
+const { Title, Text } = Typography;
+
+const MAX_LOGO_BYTES = 500 * 1024; // ~500KB — logo de cabeçalho não precisa mais
+
+function fileToDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new Error('Falha ao ler o arquivo'));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function GerConfigPage() {
+  const { data: empresa, isLoading } = useCompany();
+  const qc = useQueryClient();
+  const [msg, msgCtx] = message.useMessage();
+  const [uploading, setUploading] = useState(false);
+
+  const updateLogo = useMutation({
+    mutationFn: (logoBase64: string | null) =>
+      apiFetch('/catalog/company/logo', { method: 'PUT', body: { logoBase64 } }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['company'] }),
+  });
+
+  const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
+    if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) {
+      void msg.error('Use uma imagem PNG, JPG ou WebP');
+      return Upload.LIST_IGNORE;
+    }
+    if (file.size > MAX_LOGO_BYTES) {
+      void msg.error('Imagem muito grande — use um arquivo de até 500KB');
+      return Upload.LIST_IGNORE;
+    }
+    setUploading(true);
+    try {
+      const dataUrl = await fileToDataUrl(file);
+      await updateLogo.mutateAsync(dataUrl);
+      void msg.success('Logo atualizado — já vale para as impressões de todos os representantes');
+    } catch {
+      // erro já notificado pelo handler global do QueryClient
+    } finally {
+      setUploading(false);
+    }
+    return Upload.LIST_IGNORE; // upload manual — nada vai para action padrão
+  };
+
+  async function removeLogo() {
+    try {
+      await updateLogo.mutateAsync(null);
+    } catch {
+      return;
+    }
+    void msg.success('Logo removido');
+  }
+
+  return (
+    <Flex vertical gap={24} style={{ maxWidth: 1280, margin: '0 auto' }}>
+      {msgCtx}
+      <Flex vertical gap={4}>
+        <Title level={2} style={{ margin: 0 }}>
+          Configurações
+        </Title>
+        <Text type="secondary" style={{ fontSize: 'var(--text-lg)' }}>
+          Preferências da empresa aplicadas a todos os representantes
+        </Text>
+      </Flex>
+
+      <Card
+        title={
+          <Flex align="center" gap={8}>
+            <FontAwesomeIcon icon={faImage} style={{ color: 'var(--jcs-blue)' }} />
+            Logo da Empresa
+          </Flex>
+        }
+        style={{ maxWidth: 640 }}
+      >
+        {isLoading ? (
+          <Skeleton active paragraph={{ rows: 3 }} />
+        ) : (
+          <Flex vertical gap={16}>
+            <Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
+              Aparece no cabeçalho da impressão do pedido (PDF) de todos os representantes da{' '}
+              {empresa?.nomeFantasia ?? empresa?.razaoSocial ?? 'empresa'}. PNG com fundo
+              transparente fica melhor. Máx. 500KB.
+            </Text>
+
+            <Flex align="center" gap={24} wrap="wrap">
+              <div
+                style={{
+                  width: 220,
+                  height: 90,
+                  border: '1px dashed #CBD5E1',
+                  borderRadius: 8,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: '#F8FAFC',
+                  overflow: 'hidden',
+                }}
+              >
+                {empresa?.logoBase64 ? (
+                  <img
+                    src={empresa.logoBase64}
+                    alt="Logo da empresa"
+                    style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+                  />
+                ) : (
+                  <Text type="secondary" style={{ fontSize: 'var(--text-xs)' }}>
+                    Nenhum logo cadastrado
+                  </Text>
+                )}
+              </div>
+
+              <Flex vertical gap={8}>
+                <Upload
+                  accept="image/png,image/jpeg,image/webp"
+                  showUploadList={false}
+                  beforeUpload={beforeUpload}
+                >
+                  <Button
+                    type="primary"
+                    icon={<FontAwesomeIcon icon={faUpload} />}
+                    loading={uploading || updateLogo.isPending}
+                  >
+                    {empresa?.logoBase64 ? 'Trocar logo' : 'Enviar logo'}
+                  </Button>
+                </Upload>
+                {empresa?.logoBase64 && (
+                  <Popconfirm
+                    title="Remover o logo?"
+                    okText="Sim"
+                    cancelText="Nao"
+                    onConfirm={() => void removeLogo()}
+                  >
+                    <Button danger icon={<FontAwesomeIcon icon={faTrash} />}>
+                      Remover
+                    </Button>
+                  </Popconfirm>
+                )}
+              </Flex>
+            </Flex>
+          </Flex>
+        )}
+      </Card>
+    </Flex>
+  );
+}

apps/web/src/cockpits/rep/OrderPrintPage.tsx

@@ -145,60 +145,71 @@ export function OrderPrintPage() {
           color: INK,
         }}
       >
-        {/* ── Cabeçalho: empresa matriz que fatura ───────────────────────── */}
+        {/* ── Cabeçalho compacto: logo + empresa matriz + nº do pedido ────── */}
         <div
           style={{
             display: 'flex',
             justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            padding: '22px 28px',
-            borderTop: `5px solid ${BLUE}`,
-            background: 'linear-gradient(180deg,#F8FAFD 0%,#fff 100%)',
-            borderBottom: `1px solid ${LINE}`,
+            alignItems: 'center',
+            gap: 16,
+            padding: '12px 28px',
+            borderTop: `4px solid ${BLUE}`,
+            borderBottom: `2px solid ${BLUE}`,
           }}
         >
-          <div style={{ maxWidth: 460 }}>
-            <div style={{ fontSize: 19, fontWeight: 800, color: BLUE, lineHeight: 1.1 }}>
-              {empresa?.nomeFantasia ?? empresa?.razaoSocial ?? '...'}
-            </div>
-            <div style={{ fontSize: 11, color: MUTED, marginTop: 2 }}>{empresa?.razaoSocial}</div>
-            <div style={{ fontSize: 10.5, color: MUTED, marginTop: 6, lineHeight: 1.5 }}>
-              {empresa?.cnpj && <>CNPJ {empresa.cnpj}</>}
-              {empresa?.inscricaoEstadual && <> · IE {empresa.inscricaoEstadual}</>}
-              {enderecoEmp && <div>{enderecoEmp}</div>}
-              {cidadeEmp && <div>{cidadeEmp}</div>}
-              {(empresa?.telefone || empresa?.email) && (
-                <div>
-                  {empresa?.telefone && <>Tel {phone(empresa.telefone)}</>}
-                  {empresa?.telefone && empresa?.email && <> · </>}
-                  {empresa?.email}
-                </div>
-              )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
+            {empresa?.logoBase64 && (
+              <img
+                src={empresa.logoBase64}
+                alt="Logo"
+                style={{ maxHeight: 52, maxWidth: 140, objectFit: 'contain', flexShrink: 0 }}
+              />
+            )}
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 15, fontWeight: 800, color: BLUE, lineHeight: 1.15 }}>
+                {empresa?.nomeFantasia ?? empresa?.razaoSocial ?? '...'}
+              </div>
+              <div style={{ fontSize: 8.5, color: MUTED, marginTop: 2, lineHeight: 1.45 }}>
+                {empresa?.razaoSocial && empresa.razaoSocial !== empresa.nomeFantasia && (
+                  <>{empresa.razaoSocial} · </>
+                )}
+                {empresa?.cnpj && <>CNPJ {empresa.cnpj}</>}
+                {empresa?.inscricaoEstadual && <> · IE {empresa.inscricaoEstadual}</>}
+                <br />
+                {[enderecoEmp, cidadeEmp].filter(Boolean).join(' · ')}
+                {(empresa?.telefone || empresa?.email) && (
+                  <>
+                    <br />
+                    {empresa?.telefone && <>Tel {phone(empresa.telefone)}</>}
+                    {empresa?.telefone && empresa?.email && <> · </>}
+                    {empresa?.email}
+                  </>
+                )}
+              </div>
             </div>
           </div>
-          <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 10, color: MUTED, fontWeight: 700, letterSpacing: '0.1em' }}>
+          <div style={{ textAlign: 'right', flexShrink: 0 }}>
+            <div style={{ fontSize: 9, color: MUTED, fontWeight: 700, letterSpacing: '0.1em' }}>
               PEDIDO
             </div>
-            <div style={{ fontSize: 22, fontWeight: 800, color: INK, lineHeight: 1.1 }}>
+            <div style={{ fontSize: 19, fontWeight: 800, color: INK, lineHeight: 1.1 }}>
               {order.numPedSar}
             </div>
-            <div
-              style={{
-                display: 'inline-block',
-                marginTop: 6,
-                padding: '2px 10px',
-                borderRadius: 20,
-                background: `${BLUE}12`,
-                color: BLUE,
-                fontSize: 10.5,
-                fontWeight: 700,
-              }}
-            >
-              {SITUA_LABEL[order.situa] ?? String(order.situa)}
-            </div>
-            <div style={{ fontSize: 10.5, color: MUTED, marginTop: 6 }}>
-              Emissão: {dateBR(order.dtPedido)}
+            <div style={{ fontSize: 9.5, color: MUTED, marginTop: 3 }}>
+              <span
+                style={{
+                  display: 'inline-block',
+                  padding: '1px 8px',
+                  borderRadius: 20,
+                  background: `${BLUE}12`,
+                  color: BLUE,
+                  fontWeight: 700,
+                  marginRight: 6,
+                }}
+              >
+                {SITUA_LABEL[order.situa] ?? String(order.situa)}
+              </span>
+              {dateBR(order.dtPedido)}
             </div>
           </div>
         </div>

apps/web/src/components/layout/Sidebar.tsx

@@ -12,6 +12,7 @@ import {
   faFileInvoiceDollar,
   faTags,
   faHeadset,
+  faGear,
 } from '@fortawesome/free-solid-svg-icons';
 import type { ItemType } from 'antd/es/menu/interface';
 import { authStore } from '../../lib/auth-store';
@@ -102,6 +103,11 @@ const GERENTE_ITEMS: ItemType[] = [
     label: 'Políticas Comerciais',
   },
   { key: '/ger/chamados', icon: <FontAwesomeIcon icon={faHeadset} fixedWidth />, label: 'SAC' },
+  {
+    key: '/ger/config',
+    icon: <FontAwesomeIcon icon={faGear} fixedWidth />,
+    label: 'Configurações',
+  },
 ];
 
 function getItems(role: string): ItemType[] {

apps/web/src/lib/router.tsx

@@ -27,6 +27,7 @@ import { EquipePage } from '../cockpits/ger/EquipePage';
 import { PoliticasPage } from '../cockpits/ger/PoliticasPage';
 import { ChamadosPage } from '../cockpits/rep/ChamadosPage';
 import { GerChamadosPage } from '../cockpits/ger/GerChamadosPage';
+import { GerConfigPage } from '../cockpits/ger/GerConfigPage';
 import { authStore } from './auth-store';
 
 function getRoleFromToken(): string {
@@ -207,6 +208,12 @@ const gerChamadosRoute = createRoute({
   component: GerChamadosPage,
 });
 
+const gerConfigRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/ger/config',
+  component: GerConfigPage,
+});
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   rafaelRoute,
@@ -228,6 +235,7 @@ const routeTree = rootRoute.addChildren([
   politicasRoute,
   chamadosRoute,
   gerChamadosRoute,
+  gerConfigRoute,
 ]);
 
 export const router = createRouter({