feat(web): foundation com brand JCS + AntD theme + Rafael painel placeholder

- Design tokens (CSS variables) espelhando brand.md v1.0: - Paleta JCS Blue #004a99 + estados funcionais - Plus Jakarta Sans Variable self-host (LGPD + perf) - Radius 12/20, sombra 0 4px 25px rgba(0,0,0,0.05) - Layout topbar 80 + sidebar 260 (brand.md canon) - AntD ConfigProvider com tema JCS (cores, fonts, radius, shadow, motion) - TanStack Router + Query setup com defaults conservadores - AppShell desktop (Topbar + Sidebar) com tom canônico - RafaelPainel placeholder com vocabulário canônico: meta de maio, clientes esfriando (OPENFRIOS 47 dias), próxima visita, comissão+FLEX, copy direta apple-inspired - Logos copiadas para apps/web/public/ - Limpeza: removidos placeholders Nx (app.tsx, nx-welcome.tsx, styles.css) - pt-BR locale (dayjs + AntD) - Build OK: 878KB JS (vai code-splitar pós cockpits separados) Refs: brand.md, design-artifacts/A-Product-Brief/03-visual-direction.md, design-artifacts/B-Trigger-Map/personas/02-rafael-representante.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 17:12:34 +00:00
parent 17c08e6392
commit 3a42723c71
23 changed files with 2037 additions and 893 deletions
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -1,13 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
-    <title>Web</title>
+    <title>SAR — Força de Vendas</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="description" content="SAR — Plataforma de força de vendas com 4 cockpits, WhatsApp nativo e IA estratégica." />
+    <meta name="theme-color" content="#004a99" />
    <base href="/" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="icon" type="image/png" href="/sar-icon.png" />
+    <link rel="apple-touch-icon" href="/sar-icon.png" />
  </head>
  <body>
    <div id="root"></div>
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@sar/web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "SAR · Web (React 19 + Vite 8 + AntD 6.4)",
+  "dependencies": {
+    "@ant-design/icons": "^6.2.3",
+    "@fontsource-variable/plus-jakarta-sans": "^5.2.8",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
+    "@hookform/resolvers": "^5.4.0",
+    "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-router": "^1.170.8",
+    "antd": "^6.4.3",
+    "chart.js": "^4.5.1",
+    "dayjs": "^1.11.21",
+    "react-chartjs-2": "^5.3.1",
+    "react-hook-form": "^7.76.1",
+    "zod": "catalog:",
+    "zustand": "^5.0.13"
+  }
+}
--- a/apps/web/public/sar-icon.png
+++ b/apps/web/public/sar-icon.png
--- a/apps/web/public/sar-logo.png
+++ b/apps/web/public/sar-logo.png
--- a/apps/web/src/app/app.module.css
+++ b/apps/web/src/app/app.module.css
@@ -1 +0,0 @@
-/* Your styles goes here. */
--- a/apps/web/src/app/app.spec.tsx
+++ b/apps/web/src/app/app.spec.tsx
@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react';
-
-import App from './app';
-
-describe('App', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<App />);
-    expect(baseElement).toBeTruthy();
-  });
-
-  it('should have a greeting as the title', () => {
-    const { getAllByText } = render(<App />);
-    expect(getAllByText(new RegExp('Welcome web', 'gi')).length > 0).toBeTruthy();
-  });
-});
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -1,13 +0,0 @@
-// Uncomment this line to use CSS modules
-// import styles from './app.module.css';
-import NxWelcome from './nx-welcome';
-
-export function App() {
-  return (
-    <div>
-      <NxWelcome title="web" />
-    </div>
-  );
-}
-
-export default App;
--- a/apps/web/src/app/nx-welcome.tsx
+++ b/apps/web/src/app/nx-welcome.tsx
@@ -1,851 +0,0 @@
-/*
- * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- This is a starter component and can be deleted.
- * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- Delete this file and get started with your project!
- * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- */
-export function NxWelcome({ title }: { title: string }) {
-  return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-    html {
-      -webkit-text-size-adjust: 100%;
-      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-      'Noto Color Emoji';
-      line-height: 1.5;
-      tab-size: 4;
-      scroll-behavior: smooth;
-    }
-    body {
-      font-family: inherit;
-      line-height: inherit;
-      margin: 0;
-    }
-    h1,
-    h2,
-    p,
-    pre {
-      margin: 0;
-    }
-    *,
-    ::before,
-    ::after {
-      box-sizing: border-box;
-      border-width: 0;
-      border-style: solid;
-      border-color: currentColor;
-    }
-    h1,
-    h2 {
-      font-size: inherit;
-      font-weight: inherit;
-    }
-    a {
-      color: inherit;
-      text-decoration: inherit;
-    }
-    pre {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
-    }
-    svg {
-      display: block;
-      vertical-align: middle;
-      shape-rendering: auto;
-      text-rendering: optimizeLegibility;
-    }
-    pre {
-      background-color: rgba(55, 65, 81, 1);
-      border-radius: 0.25rem;
-      color: rgba(229, 231, 235, 1);
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
-      overflow: auto;
-      padding: 0.5rem 0.75rem;
-    }
-
-    .shadow {
-      box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-    .rounded {
-      border-radius: 1.5rem;
-    }
-    .wrapper {
-      width: 100%;
-    }
-    .container {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 768px;
-      padding-bottom: 3rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      color: rgba(55, 65, 81, 1);
-      width: 100%;
-    }
-    #welcome {
-      margin-top: 2.5rem;
-    }
-    #welcome h1 {
-      font-size: 3rem;
-      font-weight: 500;
-      letter-spacing: -0.025em;
-      line-height: 1;
-    }
-    #welcome span {
-      display: block;
-      font-size: 1.875rem;
-      font-weight: 300;
-      line-height: 2.25rem;
-      margin-bottom: 0.5rem;
-    }
-    #hero {
-      align-items: center;
-      background-color: hsla(214, 62%, 21%, 1);
-      border: none;
-      box-sizing: border-box;
-      color: rgba(55, 65, 81, 1);
-      display: grid;
-      grid-template-columns: 1fr;
-      margin-top: 3.5rem;
-    }
-    #hero .text-container {
-      color: rgba(255, 255, 255, 1);
-      padding: 3rem 2rem;
-    }
-    #hero .text-container h2 {
-      font-size: 1.5rem;
-      line-height: 2rem;
-      position: relative;
-    }
-    #hero .text-container h2 svg {
-      color: hsla(162, 47%, 50%, 1);
-      height: 2rem;
-      left: -0.25rem;
-      position: absolute;
-      top: 0;
-      width: 2rem;
-    }
-    #hero .text-container h2 span {
-      margin-left: 2.5rem;
-    }
-    #hero .text-container a {
-      background-color: rgba(255, 255, 255, 1);
-      border-radius: 0.75rem;
-      color: rgba(55, 65, 81, 1);
-      display: inline-block;
-      margin-top: 1.5rem;
-      padding: 1rem 2rem;
-      text-decoration: inherit;
-    }
-    #hero .logo-container {
-      display: none;
-      justify-content: center;
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-    #hero .logo-container svg {
-      color: rgba(255, 255, 255, 1);
-      width: 66.666667%;
-    }
-    #middle-content {
-      align-items: flex-start;
-      display: grid;
-      grid-template-columns: 1fr;
-      margin-top: 3.5rem;
-    }
-
-    #middle-content #middle-content-container {
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-    #learning-materials {
-      padding: 2.5rem 2rem;
-    }
-    #learning-materials h2 {
-      font-weight: 500;
-      font-size: 1.25rem;
-      letter-spacing: -0.025em;
-      line-height: 1.75rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    .list-item-link {
-      align-items: center;
-      border-radius: 0.75rem;
-      display: flex;
-      margin-top: 1rem;
-      padding: 1rem;
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      width: 100%;
-    }
-    .list-item-link svg:first-child {
-      margin-right: 1rem;
-      height: 1.5rem;
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      width: 1.5rem;
-    }
-    .list-item-link > span {
-      flex-grow: 1;
-      font-weight: 400;
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .list-item-link > span > span {
-      color: rgba(107, 114, 128, 1);
-      display: block;
-      flex-grow: 1;
-      font-size: 0.75rem;
-      font-weight: 300;
-      line-height: 1rem;
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .list-item-link svg:last-child {
-      height: 1rem;
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      width: 1rem;
-    }
-    .list-item-link:hover {
-      color: rgba(255, 255, 255, 1);
-      background-color: hsla(162, 55%, 33%, 1);
-    }
-    .list-item-link:hover > span {}
-    .list-item-link:hover > span > span {
-      color: rgba(243, 244, 246, 1);
-    }
-    .list-item-link:hover svg:last-child {
-      transform: translateX(0.25rem);
-    }
-    #other-links {}
-    .button-pill {
-      padding: 1.5rem 2rem;
-      margin-bottom: 2rem;
-      transition-duration: 300ms;
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      align-items: center;
-      display: flex;
-    }
-    .button-pill svg {
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      flex-shrink: 0;
-      width: 3rem;
-    }
-    .button-pill > span {
-      letter-spacing: -0.025em;
-      font-weight: 400;
-      font-size: 1.125rem;
-      line-height: 1.75rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    .button-pill span span {
-      display: block;
-      font-size: 0.875rem;
-      font-weight: 300;
-      line-height: 1.25rem;
-    }
-    .button-pill:hover svg,
-    .button-pill:hover {
-      color: rgba(255, 255, 255, 1) !important;
-    }
-    #nx-console:hover {
-      background-color: rgba(0, 122, 204, 1);
-    }
-    #nx-console svg {
-      color: rgba(0, 122, 204, 1);
-    }
-    #nx-console-jetbrains {
-      margin-top: 2rem;
-    }
-    #nx-console-jetbrains:hover {
-      background-color: rgba(255, 49, 140, 1);
-    }
-    #nx-console-jetbrains svg {
-      color: rgba(255, 49, 140, 1);
-    }
-    #nx-repo:hover {
-      background-color: rgba(24, 23, 23, 1);
-    }
-    #nx-repo svg {
-      color: rgba(24, 23, 23, 1);
-    }
-    #nx-cloud {
-      margin-bottom: 2rem;
-      margin-top: 2rem;
-      padding: 2.5rem 2rem;
-    }
-    #nx-cloud > div {
-      align-items: center;
-      display: flex;
-    }
-    #nx-cloud > div svg {
-      border-radius: 0.375rem;
-      flex-shrink: 0;
-      width: 3rem;
-    }
-    #nx-cloud > div h2 {
-      font-size: 1.125rem;
-      font-weight: 400;
-      letter-spacing: -0.025em;
-      line-height: 1.75rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    #nx-cloud > div h2 span {
-      display: block;
-      font-size: 0.875rem;
-      font-weight: 300;
-      line-height: 1.25rem;
-    }
-    #nx-cloud p {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      margin-top: 1rem;
-    }
-    #nx-cloud pre {
-      margin-top: 1rem;
-    }
-    #nx-cloud a {
-      color: rgba(107, 114, 128, 1);
-      display: block;
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      margin-top: 1.5rem;
-      text-align: right;
-    }
-    #nx-cloud a:hover {
-      text-decoration: underline;
-    }
-    #commands {
-      padding: 2.5rem 2rem;
-      margin-top: 3.5rem;
-    }
-    #commands h2 {
-      font-size: 1.25rem;
-      font-weight: 400;
-      letter-spacing: -0.025em;
-      line-height: 1.75rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    #commands p {
-      font-size: 1rem;
-      font-weight: 300;
-      line-height: 1.5rem;
-      margin-top: 1rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    details {
-      align-items: center;
-      display: flex;
-      margin-top: 1rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      width: 100%;
-    }
-    details pre > span {
-      color: rgba(181, 181, 181, 1);
-      display: block;
-    }
-    summary {
-      border-radius: 0.5rem;
-      display: flex;
-      font-weight: 400;
-      padding: 0.5rem;
-      cursor: pointer;
-      transition-property: background-color, border-color, color, fill, stroke,
-      opacity, box-shadow, transform, filter, backdrop-filter,
-      -webkit-backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-    }
-    summary:hover {
-      background-color: rgba(243, 244, 246, 1);
-    }
-    summary svg {
-      height: 1.5rem;
-      margin-right: 1rem;
-      width: 1.5rem;
-    }
-    #love {
-      color: rgba(107, 114, 128, 1);
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      margin-top: 3.5rem;
-      opacity: 0.6;
-      text-align: center;
-    }
-    #love svg {
-      color: rgba(252, 165, 165, 1);
-      width: 1.25rem;
-      height: 1.25rem;
-      display: inline;
-      margin-top: -0.25rem;
-    }
-    @media screen and (min-width: 768px) {
-      #hero {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-      #hero .logo-container {
-        display: flex;
-      }
-      #middle-content {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 4rem;
-      }
-    }
-          `,
-        }}
-      />
-      <div className="wrapper">
-        <div className="container">
-          <div id="welcome">
-            <h1>
-              <span> Hello there, </span>
-              Welcome {title} 👋
-            </h1>
-          </div>
-
-          <div id="hero" className="rounded">
-            <div className="text-container">
-              <h2>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
-                  />
-                </svg>
-                <span>You&apos;re up and running</span>
-              </h2>
-              <a href="#commands"> What&apos;s next? </a>
-            </div>
-            <div className="logo-container">
-              <svg
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
-              </svg>
-            </div>
-          </div>
-
-          <div id="middle-content">
-            <div id="middle-content-container">
-              <div id="learning-materials" className="rounded shadow">
-                <h2>Learning materials</h2>
-                <a
-                  href="https://nx.dev/getting-started/intro?utm_source=nx-project"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="list-item-link"
-                >
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                    />
-                  </svg>
-                  <span>
-                    Documentation
-                    <span> Everything is in there </span>
-                  </span>
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </a>
-                <a
-                  href="https://nx.dev/blog/?utm_source=nx-project"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="list-item-link"
-                >
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
-                    />
-                  </svg>
-                  <span>
-                    Blog
-                    <span> Changelog, features & events </span>
-                  </span>
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </a>
-                <a
-                  href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="list-item-link"
-                >
-                  <svg
-                    role="img"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>YouTube</title>
-                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-                  </svg>
-                  <span>
-                    YouTube channel
-                    <span> Nx Show, talks & tutorials </span>
-                  </span>
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </a>
-                <a
-                  href="https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="list-item-link"
-                >
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
-                    />
-                  </svg>
-                  <span>
-                    Interactive tutorials
-                    <span> Create an app, step-by-step </span>
-                  </span>
-                  <svg
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </a>
-              </div>
-              <a
-                id="nx-repo"
-                className="button-pill rounded shadow"
-                href="https://github.com/nrwl/nx?utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <svg
-                  fill="currentColor"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-                </svg>
-                <span>
-                  Nx is open source
-                  <span> Love Nx? Give us a star! </span>
-                </span>
-              </a>
-            </div>
-            <div id="other-links">
-              <a
-                id="nx-console"
-                className="button-pill rounded shadow"
-                href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <svg
-                  fill="currentColor"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>Visual Studio Code</title>
-                  <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
-                </svg>
-                <span>
-                  Install Nx Console for VSCode
-                  <span>The official VSCode extension for Nx.</span>
-                </span>
-              </a>
-              <a
-                id="nx-console-jetbrains"
-                className="button-pill rounded shadow"
-                href="https://plugins.jetbrains.com/plugin/21060-nx-console"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <svg
-                  height="48"
-                  width="48"
-                  viewBox="20 20 60 60"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="m22.5 22.5h60v60h-60z" />
-                  <g fill="#fff">
-                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
-                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
-                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
-                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
-                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
-                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
-                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
-                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
-                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
-                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
-                  </g>
-                </svg>
-                <span>
-                  Install Nx Console for JetBrains
-                  <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
-                </span>
-              </a>
-              <div id="nx-cloud" className="rounded shadow">
-                <div>
-                  <svg
-                    id="nx-cloud-logo"
-                    role="img"
-                    xmlns="http://www.w3.org/2000/svg"
-                    stroke="currentColor"
-                    fill="transparent"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeWidth="2"
-                      d="M23 3.75V6.5c-3.036 0-5.5 2.464-5.5 5.5s-2.464 5.5-5.5 5.5-5.5 2.464-5.5 5.5H3.75C2.232 23 1 21.768 1 20.25V3.75C1 2.232 2.232 1 3.75 1h16.5C21.768 1 23 2.232 23 3.75Z"
-                    />
-                    <path
-                      strokeWidth="2"
-                      d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z"
-                    />
-                  </svg>
-                  <h2>
-                    Nx Cloud
-                    <span>Enable faster CI & better DX</span>
-                  </h2>
-                </div>
-                <p>You can activate distributed tasks executions and caching by running:</p>
-                <pre>nx connect</pre>
-                <a
-                  href="https://nx.dev/nx-cloud?utm_source=nx-project"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {' '}
-                  What is Nx Cloud?{' '}
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div id="commands" className="rounded shadow">
-            <h2>Next steps</h2>
-            <p>Here are some things you can do with Nx:</p>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                Build, test and lint your app
-              </summary>
-              <pre>
-                <span># Build</span>
-                nx build {title}
-                <span># Test</span>
-                nx test {title}
-                <span># Lint</span>
-                nx lint {title}
-                <span># Run them together!</span>
-                nx run-many -p {title} -t build test lint
-              </pre>
-            </details>
-
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                View project details
-              </summary>
-              <pre>nx show project {title}</pre>
-            </details>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                View interactive project graph
-              </summary>
-              <pre>nx graph</pre>
-            </details>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                Add UI library
-              </summary>
-              <pre>
-                <span># Generate UI lib</span>
-                nx g @nx/react:lib ui
-                <span># Add a component</span>
-                nx g @nx/react:component ui/src/lib/button
-              </pre>
-            </details>
-          </div>
-
-          <p id="love">
-            Carefully crafted with
-            <svg
-              fill="currentColor"
-              stroke="none"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-              />
-            </svg>
-          </p>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default NxWelcome;
--- a/apps/web/src/cockpits/rafael/RafaelPainel.tsx
+++ b/apps/web/src/cockpits/rafael/RafaelPainel.tsx
@@ -0,0 +1,204 @@
+import { Card, Col, Flex, Progress, Row, Space, Tag, Typography } from 'antd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowTrendUp,
+  faClipboardCheck,
+  faCircleExclamation,
+  faRoute,
+  faMessage,
+} from '@fortawesome/free-solid-svg-icons';
+
+const { Title, Text } = Typography;
+
+/**
+ * Painel do Rafael (Representante) — PRIMARY persona.
+ * MOCK data — substituir por TanStack Query quando API estiver pronta.
+ * Tom canônico: Direto · Confiante · Específico (vocabulário: meta, carteira, inativo, pedido).
+ */
+export function RafaelPainel() {
+  // Mock — em produção vem de TanStack Query
+  const metaMes = { atingido: 47600, total: 60000 };
+  const metaPct = Math.round((metaMes.atingido / metaMes.total) * 100);
+  const falta = metaMes.total - metaMes.atingido;
+
+  return (
+    <Flex vertical gap={24} style={{ maxWidth: 1280, margin: '0 auto' }}>
+      {/* Saudação canon (tom: Direto, Específico) */}
+      <Flex vertical gap={4}>
+        <Title level={2} style={{ margin: 0 }}>
+          Bom dia, Rafael
+        </Title>
+        <Text type="secondary" style={{ fontSize: 'var(--text-lg)' }}>
+          27 de maio · 4 visitas na agenda · 2 propostas pra avançar
+        </Text>
+      </Flex>
+
+      {/* Linha 1 — Meta + KPIs rápidos */}
+      <Row gutter={[24, 24]}>
+        <Col xs={24} md={12}>
+          <Card style={{ height: '100%' }}>
+            <Flex vertical gap={16}>
+              <Flex justify="space-between" align="flex-start">
+                <Space direction="vertical" size={0}>
+                  <Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
+                    META DE MAIO
+                  </Text>
+                  <Title level={3} style={{ margin: 0 }} className="tabular-nums">
+                    R$ {metaMes.atingido.toLocaleString('pt-BR')}
+                  </Title>
+                  <Text type="secondary">
+                    de R${' '}
+                    <span className="tabular-nums">
+                      {metaMes.total.toLocaleString('pt-BR')}
+                    </span>
+                  </Text>
+                </Space>
+                <Tag color={metaPct >= 80 ? 'success' : 'processing'}>
+                  {metaPct}% atingido
+                </Tag>
+              </Flex>
+              <Progress
+                percent={metaPct}
+                showInfo={false}
+                strokeColor="var(--jcs-blue)"
+                trailColor="var(--jcs-blue-light)"
+              />
+              <Text style={{ fontSize: 'var(--text-md)' }}>
+                Faltam{' '}
+                <strong className="tabular-nums">
+                  R$ {falta.toLocaleString('pt-BR')}
+                </strong>{' '}
+                pra fechar maio.
+              </Text>
+            </Flex>
+          </Card>
+        </Col>
+
+        <Col xs={12} md={6}>
+          <Card>
+            <Space direction="vertical" size={4}>
+              <Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
+                PEDIDOS NO MÊS
+              </Text>
+              <Title level={3} style={{ margin: 0 }} className="tabular-nums">
+                28
+              </Title>
+              <Text type="success" style={{ fontSize: 'var(--text-sm)' }}>
+                <FontAwesomeIcon icon={faArrowTrendUp} /> +18% vs abril
+              </Text>
+            </Space>
+          </Card>
+        </Col>
+
+        <Col xs={12} md={6}>
+          <Card>
+            <Space direction="vertical" size={4}>
+              <Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
+                COMISSÃO ACUMULADA
+              </Text>
+              <Title level={3} style={{ margin: 0 }} className="tabular-nums">
+                R$ 2.540
+              </Title>
+              <Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
+                FLEX: R$ 380
+              </Text>
+            </Space>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Linha 2 — Alertas + Próxima visita */}
+      <Row gutter={[24, 24]}>
+        <Col xs={24} lg={12}>
+          <Card
+            title={
+              <Space>
+                <FontAwesomeIcon
+                  icon={faCircleExclamation}
+                  style={{ color: 'var(--orange)' }}
+                />
+                Clientes esfriando
+              </Space>
+            }
+            extra={<Text type="secondary">3 hoje</Text>}
+          >
+            <Flex vertical gap={12}>
+              <ClienteInativoItem nome="OPENFRIOS" dias={47} ultimaCompra="R$ 3.200" />
+              <ClienteInativoItem nome="DISTRIBUIDORA NORTE" dias={62} ultimaCompra="R$ 1.880" />
+              <ClienteInativoItem nome="MERCADO SÃO PAULO" dias={71} ultimaCompra="R$ 980" />
+            </Flex>
+          </Card>
+        </Col>
+
+        <Col xs={24} lg={12}>
+          <Card
+            title={
+              <Space>
+                <FontAwesomeIcon icon={faRoute} style={{ color: 'var(--jcs-blue)' }} />
+                Próxima visita
+              </Space>
+            }
+          >
+            <Flex vertical gap={12}>
+              <Space direction="vertical" size={4}>
+                <Title level={4} style={{ margin: 0, color: 'var(--jcs-blue)' }}>
+                  OPENFRIOS
+                </Title>
+                <Text type="secondary">
+                  Rua das Indústrias, 1.245 · São Paulo, SP · 14:30
+                </Text>
+              </Space>
+              <Flex gap={12} wrap="wrap">
+                <Tag icon={<FontAwesomeIcon icon={faClipboardCheck} />} color="processing">
+                  3 pedidos em andamento
+                </Tag>
+                <Tag icon={<FontAwesomeIcon icon={faMessage} />} color="success">
+                  WhatsApp atualizado
+                </Tag>
+              </Flex>
+            </Flex>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Footer informativo (sem ruído — tom Apple clean) */}
+      <Flex justify="center" style={{ paddingTop: 16 }}>
+        <Text type="secondary" style={{ fontSize: 'var(--text-xs)' }}>
+          SAR · Força de Vendas · Powered by JCS Sistemas
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+function ClienteInativoItem({
+  nome,
+  dias,
+  ultimaCompra,
+}: {
+  nome: string;
+  dias: number;
+  ultimaCompra: string;
+}) {
+  return (
+    <Flex
+      justify="space-between"
+      align="center"
+      style={{
+        padding: 'var(--space-sm) var(--space-md)',
+        borderRadius: 12,
+        background: 'var(--bg-surface-alt)',
+      }}
+    >
+      <Space direction="vertical" size={0}>
+        <Text strong>{nome}</Text>
+        <Text type="secondary" style={{ fontSize: 'var(--text-xs)' }}>
+          Última compra: <span className="tabular-nums">{ultimaCompra}</span>
+        </Text>
+      </Space>
+      <Tag color="warning" className="tabular-nums">
+        {dias} dias
+      </Tag>
+    </Flex>
+  );
+}
--- a/apps/web/src/components/layout/AppShell.tsx
+++ b/apps/web/src/components/layout/AppShell.tsx
@@ -0,0 +1,37 @@
+import { useState, type ReactNode } from 'react';
+import { Flex } from 'antd';
+import { Topbar } from './Topbar';
+import { Sidebar } from './Sidebar';
+
+interface AppShellProps {
+  children: ReactNode;
+}
+
+/**
+ * AppShell canônico do SAR — topbar 80 + sidebar 260 + área de conteúdo.
+ * Layout para cockpits Sandra/Daniel/Alice (desktop-first).
+ * Variante mobile (Rafael) com bottom nav virá em ShellMobile separado.
+ */
+export function AppShell({ children }: AppShellProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_sidebarOpen, setSidebarOpen] = useState(true);
+
+  return (
+    <Flex vertical style={{ minHeight: '100vh', background: 'var(--bg-body)' }}>
+      <Topbar onToggleSidebar={() => setSidebarOpen((v) => !v)} />
+      <Flex flex={1}>
+        <Sidebar />
+        <main
+          style={{
+            flex: 1,
+            padding: 'var(--space-xl)',
+            overflow: 'auto',
+            maxWidth: '100%',
+          }}
+        >
+          {children}
+        </main>
+      </Flex>
+    </Flex>
+  );
+}
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -0,0 +1,102 @@
+import { Menu } from 'antd';
+import { useLocation, useNavigate } from '@tanstack/react-router';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChartLine,
+  faClipboardList,
+  faFunnelDollar,
+  faCalendarDays,
+  faUsers,
+  faBoxesStacked,
+  faGear,
+  faPercent,
+  faFileInvoiceDollar,
+} from '@fortawesome/free-solid-svg-icons';
+import type { ItemType } from 'antd/es/menu/interface';
+
+/**
+ * Sidebar canônica do SAR (260px fixa — brand.md).
+ * Itens mockados para Rafael cockpit. Variantes por cockpit virão depois.
+ */
+export function Sidebar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const items: ItemType[] = [
+    {
+      key: '/',
+      icon: <FontAwesomeIcon icon={faChartLine} fixedWidth />,
+      label: 'Painel',
+    },
+    {
+      key: '/agenda',
+      icon: <FontAwesomeIcon icon={faCalendarDays} fixedWidth />,
+      label: 'Agenda e Rotas',
+    },
+    {
+      key: '/clientes',
+      icon: <FontAwesomeIcon icon={faUsers} fixedWidth />,
+      label: 'Clientes',
+    },
+    {
+      key: '/produtos',
+      icon: <FontAwesomeIcon icon={faBoxesStacked} fixedWidth />,
+      label: 'Catálogo',
+    },
+    {
+      key: '/funil',
+      icon: <FontAwesomeIcon icon={faFunnelDollar} fixedWidth />,
+      label: 'Funil de Vendas',
+    },
+    {
+      key: '/pedidos',
+      icon: <FontAwesomeIcon icon={faClipboardList} fixedWidth />,
+      label: 'Pedidos',
+    },
+    {
+      key: '/comissao',
+      icon: <FontAwesomeIcon icon={faPercent} fixedWidth />,
+      label: 'Comissão / FLEX',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: '/relatorios',
+      icon: <FontAwesomeIcon icon={faFileInvoiceDollar} fixedWidth />,
+      label: 'Relatórios',
+    },
+    {
+      key: '/configuracoes',
+      icon: <FontAwesomeIcon icon={faGear} fixedWidth />,
+      label: 'Configurações',
+    },
+  ];
+
+  return (
+    <aside
+      style={{
+        width: 'var(--layout-sidebar-width)',
+        flexShrink: 0,
+        height: 'calc(100vh - var(--layout-topbar-height))',
+        background: 'var(--bg-surface)',
+        borderRight: '1px solid var(--border-subtle)',
+        position: 'sticky',
+        top: 'var(--layout-topbar-height)',
+        overflowY: 'auto',
+        padding: 'var(--space-md) var(--space-xs)',
+      }}
+    >
+      <Menu
+        mode="inline"
+        selectedKeys={[location.pathname]}
+        items={items}
+        onClick={({ key }) => navigate({ to: key as string })}
+        style={{
+          border: 'none',
+          background: 'transparent',
+        }}
+      />
+    </aside>
+  );
+}
--- a/apps/web/src/components/layout/Topbar.tsx
+++ b/apps/web/src/components/layout/Topbar.tsx
@@ -0,0 +1,111 @@
+import { Avatar, Badge, Button, Flex, Input } from 'antd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBell, faMagnifyingGlass, faBars } from '@fortawesome/free-solid-svg-icons';
+import { brandTokens } from '../../lib/theme';
+
+interface TopbarProps {
+  onToggleSidebar?: () => void;
+}
+
+/**
+ * Topbar canônica do SAR (80px de altura — brand.md).
+ * Apple-inspired clean: logo à esquerda, search central, notif + perfil à direita.
+ * Variantes por cockpit: search desabilitada para Rafael mobile (vai pro bottom nav).
+ */
+export function Topbar({ onToggleSidebar }: TopbarProps) {
+  return (
+    <Flex
+      align="center"
+      justify="space-between"
+      style={{
+        height: 'var(--layout-topbar-height)',
+        padding: '0 var(--space-lg)',
+        background: 'var(--bg-surface)',
+        borderBottom: '1px solid var(--border-subtle)',
+        position: 'sticky',
+        top: 0,
+        zIndex: 'var(--z-sticky)',
+      }}
+    >
+      {/* Lado esquerdo: hamburger (mobile) + logo */}
+      <Flex align="center" gap={16}>
+        <Button
+          type="text"
+          icon={<FontAwesomeIcon icon={faBars} />}
+          onClick={onToggleSidebar}
+          aria-label="Alternar menu"
+          style={{ display: 'inline-flex' }}
+        />
+        <Flex align="center" gap={12}>
+          <img
+            src="/sar-icon.png"
+            alt="SAR"
+            style={{ height: 40, width: 'auto' }}
+          />
+          <Flex vertical gap={0}>
+            <span
+              style={{
+                fontSize: 'var(--text-lg)',
+                fontWeight: 'var(--font-weight-bold)',
+                color: 'var(--text-main)',
+                lineHeight: 1.1,
+              }}
+            >
+              SAR
+            </span>
+            <span
+              style={{
+                fontSize: 'var(--text-2xs)',
+                color: 'var(--text-muted)',
+                letterSpacing: '0.05em',
+                textTransform: 'uppercase',
+                fontWeight: 'var(--font-weight-medium)',
+              }}
+            >
+              Força de Vendas
+            </span>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Centro: search (Sandra/Daniel/Alice) */}
+      <Flex flex={1} justify="center" style={{ maxWidth: 480, margin: '0 var(--space-2xl)' }}>
+        <Input
+          size="large"
+          placeholder="Buscar cliente, pedido, produto..."
+          prefix={
+            <FontAwesomeIcon
+              icon={faMagnifyingGlass}
+              style={{ color: 'var(--text-muted)' }}
+            />
+          }
+          style={{ borderRadius: 12 }}
+          aria-label="Buscar"
+        />
+      </Flex>
+
+      {/* Lado direito: notificações + perfil */}
+      <Flex align="center" gap={16}>
+        <Badge count={3} color={brandTokens.red} offset={[-4, 4]}>
+          <Button
+            type="text"
+            size="large"
+            icon={<FontAwesomeIcon icon={faBell} />}
+            aria-label="Notificações"
+          />
+        </Badge>
+        <Avatar
+          size={40}
+          style={{
+            background: 'var(--jcs-blue-light)',
+            color: 'var(--jcs-blue)',
+            fontWeight: 'var(--font-weight-semibold)',
+            cursor: 'pointer',
+          }}
+        >
+          R
+        </Avatar>
+      </Flex>
+    </Flex>
+  );
+}
--- a/apps/web/src/lib/query-client.ts
+++ b/apps/web/src/lib/query-client.ts
@@ -0,0 +1,27 @@
+import { QueryClient } from '@tanstack/react-query';
+
+/**
+ * QueryClient canônico do SAR.
+ * Defaults conservadores: refetch on focus desabilitado (Visual DNA: "sereno"),
+ * stale-while-revalidate para tempo real bater no Socket.IO, não em polling.
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000, // 30s — Socket.IO atualiza antes na maioria dos casos
+      gcTime: 5 * 60_000, // 5min em cache antes de garbage collect
+      refetchOnWindowFocus: false, // evita "refresh fantasma" — Sandra/Daniel se distraem
+      refetchOnReconnect: true,
+      retry: (failureCount, error) => {
+        // 4xx não retry; 5xx até 2 retries
+        const status = (error as { status?: number })?.status;
+        if (status && status >= 400 && status < 500) return false;
+        return failureCount < 2;
+      },
+      retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30_000),
+    },
+    mutations: {
+      retry: false, // mutations não retry automático — Idempotency-Key no servidor cuida disso
+    },
+  },
+});
--- a/apps/web/src/lib/router.tsx
+++ b/apps/web/src/lib/router.tsx
@@ -0,0 +1,38 @@
+import { createRouter, createRootRoute, createRoute, Outlet } from '@tanstack/react-router';
+import { AppShell } from '../components/layout/AppShell';
+import { RafaelPainel } from '../cockpits/rafael/RafaelPainel';
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <AppShell>
+      <Outlet />
+    </AppShell>
+  ),
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: RafaelPainel,
+});
+
+// Placeholder routes (cockpits a implementar)
+const rafaelRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/rep',
+  component: RafaelPainel,
+});
+
+const routeTree = rootRoute.addChildren([indexRoute, rafaelRoute]);
+
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultPreloadStaleTime: 0,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
--- a/apps/web/src/lib/theme.ts
+++ b/apps/web/src/lib/theme.ts
@@ -0,0 +1,140 @@
+/**
+ * Tema canônico do AntD para o SAR.
+ * Espelha brand.md + design-artifacts/A-Product-Brief/03-visual-direction.md.
+ * NÃO alterar tokens primários (jcsBlue, font family) sem RFC.
+ */
+import type { ThemeConfig } from 'antd';
+
+// Tokens canônicos sincronizados com tokens.css (manter espelhados manualmente
+// ou centralizar quando build pipeline permitir).
+export const brandTokens = {
+  jcsBlue: '#004a99',
+  jcsBlueHover: '#003a7a',
+  jcsBlueLight: '#e6eff8',
+  bgBody: '#f4f7fa',
+  textMain: '#2d3748',
+  textMuted: '#718096',
+  green: '#38a169',
+  orange: '#ed8936',
+  red: '#e53e3e',
+  whatsappGreen: '#25d366',
+  borderSubtle: '#e2e8f0',
+} as const;
+
+export const sarTheme: ThemeConfig = {
+  token: {
+    // === Cor primária ===
+    colorPrimary: brandTokens.jcsBlue,
+    colorPrimaryHover: brandTokens.jcsBlueHover,
+    colorPrimaryBg: brandTokens.jcsBlueLight,
+    colorPrimaryBgHover: brandTokens.jcsBlueLight,
+
+    // === Estados funcionais ===
+    colorSuccess: brandTokens.green,
+    colorWarning: brandTokens.orange,
+    colorError: brandTokens.red,
+    colorInfo: brandTokens.jcsBlue,
+
+    // === Background ===
+    colorBgBase: '#ffffff',
+    colorBgLayout: brandTokens.bgBody,
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+
+    // === Texto ===
+    colorText: brandTokens.textMain,
+    colorTextSecondary: brandTokens.textMuted,
+    colorTextTertiary: brandTokens.textMuted,
+    colorTextQuaternary: brandTokens.textMuted,
+
+    // === Borda ===
+    colorBorder: brandTokens.borderSubtle,
+    colorBorderSecondary: brandTokens.borderSubtle,
+
+    // === Tipografia (Visual DNA: Plus Jakarta) ===
+    fontFamily:
+      "'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    fontSize: 14, // baseline body
+    fontSizeSM: 13,
+    fontSizeLG: 16,
+    fontSizeXL: 18,
+    fontSizeHeading1: 32,
+    fontSizeHeading2: 24,
+    fontSizeHeading3: 20,
+    fontSizeHeading4: 18,
+    fontSizeHeading5: 16,
+    lineHeight: 1.5,
+
+    // === Radius (brand.md) ===
+    borderRadius: 12,
+    borderRadiusLG: 20,
+    borderRadiusSM: 6,
+
+    // === Box shadow (brand.md canon — sutil único) ===
+    boxShadow: '0 4px 25px rgba(0, 0, 0, 0.05)',
+    boxShadowSecondary: '0 4px 25px rgba(0, 0, 0, 0.05)',
+    boxShadowTertiary: '0 1px 2px rgba(0, 0, 0, 0.04)',
+
+    // === Motion (Visual DNA: sutis funcionais) ===
+    motionDurationFast: '0.15s',
+    motionDurationMid: '0.2s',
+    motionDurationSlow: '0.25s',
+    motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+
+    // === Wireframe off — usamos look próprio ===
+    wireframe: false,
+  },
+  components: {
+    Layout: {
+      headerHeight: 80, // brand.md
+      headerBg: '#ffffff',
+      bodyBg: brandTokens.bgBody,
+      siderBg: '#ffffff',
+    },
+    Menu: {
+      itemBorderRadius: 12,
+      itemHeight: 44,
+      itemMarginInline: 8,
+      itemSelectedBg: brandTokens.jcsBlueLight,
+      itemSelectedColor: brandTokens.jcsBlue,
+      itemHoverBg: brandTokens.jcsBlueLight,
+      itemHoverColor: brandTokens.jcsBlue,
+    },
+    Button: {
+      borderRadius: 12,
+      controlHeight: 40,
+      controlHeightLG: 48,
+      controlHeightSM: 32,
+      fontWeight: 600,
+      primaryShadow: 'none',
+      defaultShadow: 'none',
+    },
+    Card: {
+      borderRadiusLG: 20,
+      paddingLG: 24,
+      headerBg: 'transparent',
+    },
+    Input: {
+      borderRadius: 12,
+      controlHeight: 40,
+    },
+    Select: {
+      borderRadius: 12,
+      controlHeight: 40,
+    },
+    Table: {
+      headerBg: brandTokens.bgBody,
+      headerSplitColor: 'transparent',
+      rowHoverBg: brandTokens.jcsBlueLight,
+    },
+    Tag: {
+      borderRadiusSM: 6,
+    },
+    Tooltip: {
+      borderRadius: 8,
+    },
+    Notification: {
+      borderRadiusLG: 12,
+    },
+  },
+};
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,11 +1,33 @@
 import { StrictMode } from 'react';
-import * as ReactDOM from 'react-dom/client';
-import App from './app/app';
+import { createRoot } from 'react-dom/client';
+import { ConfigProvider, App as AntdApp } from 'antd';
+import ptBR from 'antd/locale/pt_BR';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from '@tanstack/react-router';
+import dayjs from 'dayjs';
+import 'dayjs/locale/pt-br';

-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+import './styles/global.css';

-root.render(
+import { sarTheme } from './lib/theme';
+import { queryClient } from './lib/query-client';
+import { router } from './lib/router';
+
+dayjs.locale('pt-br');
+
+const rootEl = document.getElementById('root');
+if (!rootEl) {
+  throw new Error('Root element not found');
+}
+
+createRoot(rootEl).render(
  <StrictMode>
-    <App />
+    <ConfigProvider theme={sarTheme} locale={ptBR} componentSize="middle">
+      <AntdApp>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </AntdApp>
+    </ConfigProvider>
  </StrictMode>,
 );
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -0,0 +1,11 @@
+/**
+ * SAR — Global stylesheet entry
+ * Ordem: tokens → reset → fontes → app
+ */
+
+@import './tokens.css';
+@import './reset.css';
+
+/* Plus Jakarta Sans Variable — self-host (LGPD + performance) */
+@import '@fontsource-variable/plus-jakarta-sans';
+@import '@fontsource-variable/plus-jakarta-sans/wght-italic.css';
--- a/apps/web/src/styles/reset.css
+++ b/apps/web/src/styles/reset.css
@@ -0,0 +1,70 @@
+/**
+ * SAR — Reset minimalista
+ * Apple-inspired: limpa o necessário sem destruir defaults úteis (focus rings, etc.)
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--text-md);
+  line-height: var(--leading-normal);
+  color: var(--text-main);
+  background-color: var(--bg-body);
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+#root {
+  height: 100%;
+  isolation: isolate;
+}
+
+/* Focus rings visíveis (acessibilidade — WCAG AA) */
+:focus-visible {
+  outline: 2px solid var(--jcs-blue);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Tabular numerals em dashboards (Visual DNA) */
+.tabular-nums,
+[data-tabular] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Image baseline */
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+/* Type baseline */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
--- a/apps/web/src/styles/tokens.css
+++ b/apps/web/src/styles/tokens.css
@@ -0,0 +1,121 @@
+/**
+ * SAR — Design Tokens canônicos
+ * Fonte: brand.md + design-artifacts/A-Product-Brief/03-visual-direction.md
+ * NÃO alterar valores sem RFC. Variantes por cockpit vivem em outros arquivos.
+ */
+
+:root {
+  /* === Brand JCS — paleta canônica === */
+  --jcs-blue: #004a99;
+  --jcs-blue-hover: #003a7a;
+  --jcs-blue-light: #e6eff8;
+
+  /* === Background === */
+  --bg-body: #f4f7fa;
+  --bg-surface: #ffffff;
+  --bg-surface-alt: #f4f7fa;
+
+  /* === Texto === */
+  --text-main: #2d3748;
+  --text-muted: #718096;
+  --text-on-primary: #ffffff;
+  --text-disabled: #a0aec0;
+
+  /* === Estados funcionais === */
+  --green: #38a169; /* sucesso / faturado */
+  --orange: #ed8936; /* alerta / em aberto */
+  --red: #e53e3e; /* erro / bloqueado */
+  --whatsapp-green: #25d366;
+
+  /* === Bordas === */
+  --border-subtle: #e2e8f0;
+  --border-default: #cbd5e0;
+  --border-strong: #a0aec0;
+
+  /* === Radius (brand.md) === */
+  --radius-sm: 6px;
+  --radius-md: 12px; /* inputs, botões */
+  --radius-lg: 20px; /* cards, modais */
+  --radius-full: 9999px;
+
+  /* === Sombras (brand.md) === */
+  --shadow-none: 0 0 0 transparent;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow: 0 4px 25px rgba(0, 0, 0, 0.05); /* sombra canon brand.md */
+  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
+
+  /* === Spacing (preliminar, refinar Phase 6) === */
+  --space-3xs: 2px;
+  --space-2xs: 4px;
+  --space-xs: 8px;
+  --space-sm: 12px;
+  --space-md: 16px; /* baseline */
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 64px;
+
+  /* === Tipografia === */
+  --font-family-base: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans',
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+
+  /* Pesos (brand.md: 400/500/600/700/800) */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  /* Type scale (preliminar — hierarquia brand.md + Visual DNA) */
+  --text-3xs: 10px;
+  --text-2xs: 11px;
+  --text-xs: 12px;
+  --text-sm: 13px;
+  --text-md: 14px; /* body baseline AntD */
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 24px;
+  --text-3xl: 32px;
+  --text-4xl: 40px;
+
+  /* Line heights */
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  /* === Layout (brand.md) === */
+  --layout-topbar-height: 80px;
+  --layout-sidebar-width: 260px;
+  --layout-sidebar-width-collapsed: 64px;
+  --layout-bottom-nav-height: 64px;
+
+  /* === Z-index === */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal-backdrop: 400;
+  --z-modal: 500;
+  --z-popover: 600;
+  --z-tooltip: 700;
+  --z-notification: 800;
+
+  /* === Motion (Visual DNA: 150-250ms ease-out, sem decorativo) === */
+  --duration-fast: 150ms;
+  --duration: 200ms;
+  --duration-slow: 250ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-emphasize: cubic-bezier(0.2, 0, 0, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration: 0ms;
+    --duration-slow: 0ms;
+  }
+}
--- a/design-artifacts/_progress/00-design-log.md
+++ b/design-artifacts/_progress/00-design-log.md
@@ -234,6 +234,22 @@
 - **Outlines Phase 3 detalhados (Steps 5+):** retomar quando primeiro cockpit precisar ser implementado.
 - **Próximo:** **Setup do monorepo SAR** — pnpm + Nx + Nest + Prisma + Vite + React + Docker Compose + git Gitea.

+### 2026-05-27 — Setup do monorepo SAR CONCLUÍDO ✅ (Fases 1-9)
+- **Commit inicial:** `17c08e6 chore: initial monorepo scaffold + WDS Phase 1+2 artifacts` (3.631 arquivos, local, sem push)
+- **Stack ativa:** pnpm 11.1.0 · Node 24.15.0 · Nx 22.7.4 · TypeScript 5.9.3 · Prettier 3.8.3
+- **5 projetos Nx:** api · api-e2e · web · web-e2e · api-interface
+- **Build geral:** ✅ todos os 3 projetos buildáveis passam
+- **Docker Compose dev** criado (Postgres 18 · Valkey 8 · MinIO · Mailpit) — não iniciado ainda
+- **`.env.example`** template completo com todas as variáveis críticas
+- **README.md + AGENTS.md** criados como entrada para devs/agentes
+- **Git remote:** `https://git.jcsinformatica.com.br/Julian/sar` configurado (push diferido)
+- **Próximos passos sugeridos:**
+  1. Criar repo no Gitea e fazer push (`git push -u origin main`)
+  2. Subir Docker Compose dev (`pnpm dev:up`)
+  3. Implementar master-login stub (auth real virá depois)
+  4. Implementar multi-tenant BD-por-workspace via Prisma factory + cls
+  5. Primeira tela viva: login + painel Rafael (vazio)
+
 ---

 ## About This Folder
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -13,6 +13,6 @@ allowBuilds:

 catalog:
  # Stack canon JCS v2.2 — fonte da verdade: STACK.md
-  zod: ^4.0.0
+  zod: ^4.4.3
  typescript: ^5.9.3
  '@types/node': ^24.12.4
				`@@ -1 +0,0 @@`
				`/* You can add global styles to this file, and also import other style files */`