inclusao de menu na lateral esquerda

frontend/src/App.jsx

@@ -38,6 +38,9 @@ export default function App() {
   const [logsUsuario, setLogsUsuario] = useState('')
   const [logsPage, setLogsPage] = useState(1)
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [showScrollHomeBtn, setShowScrollHomeBtn] = useState(false)
+  const [scrollHomeBtnLeft, setScrollHomeBtnLeft] = useState(8)
+  const headerRef = useRef(null)
   const settingsMenuRef = useRef(null)
 
   const isAdmin = String(authUser?.perfil || '').toLowerCase() === 'admin'
@@ -180,6 +183,51 @@ export default function App() {
     }
   }, [authUser])
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined
+    if (!authUser) {
+      setShowScrollHomeBtn(false)
+      setScrollHomeBtnLeft(8)
+      return undefined
+    }
+
+    function resolveHomeButtonLeft() {
+      const buttonSize = 42
+      const navAnchor = document.querySelector('.elaboracao-side-nav-item')
+      if (navAnchor && typeof navAnchor.getBoundingClientRect === 'function') {
+        const rect = navAnchor.getBoundingClientRect()
+        return Math.max(8, rect.left + ((rect.width - buttonSize) / 2))
+      }
+      const shell = document.querySelector('.app-shell')
+      if (shell && typeof shell.getBoundingClientRect === 'function') {
+        const rect = shell.getBoundingClientRect()
+        return Math.max(8, rect.left)
+      }
+      return 8
+    }
+
+    function updateScrollHomeVisibility() {
+      const headerEl = headerRef.current
+      if (!headerEl) {
+        setShowScrollHomeBtn(false)
+        return
+      }
+      const rect = headerEl.getBoundingClientRect()
+      const shouldShow = rect.bottom <= 0
+      const nextLeft = resolveHomeButtonLeft()
+      setShowScrollHomeBtn((current) => (current === shouldShow ? current : shouldShow))
+      setScrollHomeBtnLeft((current) => (Math.abs(current - nextLeft) < 0.5 ? current : nextLeft))
+    }
+
+    updateScrollHomeVisibility()
+    window.addEventListener('scroll', updateScrollHomeVisibility, { passive: true })
+    window.addEventListener('resize', updateScrollHomeVisibility)
+    return () => {
+      window.removeEventListener('scroll', updateScrollHomeVisibility)
+      window.removeEventListener('resize', updateScrollHomeVisibility)
+    }
+  }, [authUser])
+
   async function onSubmitLogin(event) {
     event.preventDefault()
     setAuthError('')
@@ -275,9 +323,17 @@ export default function App() {
     setShowStartupIntro(false)
   }
 
+  function onScrollToHeader() {
+    if (typeof window === 'undefined') return
+    const headerEl = headerRef.current
+    if (!headerEl) return
+    const top = Math.max(0, window.scrollY + headerEl.getBoundingClientRect().top - 8)
+    window.scrollTo({ top, behavior: 'smooth' })
+  }
+
   return (
     <div className="app-shell">
-      <header className={authUser ? 'app-header app-header-logged' : 'app-header app-header-logo-only'}>
+      <header ref={headerRef} className={authUser ? 'app-header app-header-logged' : 'app-header app-header-logo-only'}>
         <div className="brand-mark" aria-hidden="true">
           <img src={`${import.meta.env.BASE_URL}logo_mesa.png`} alt="MESA" />
         </div>
@@ -351,6 +407,21 @@ export default function App() {
         ) : null}
       </header>
 
+      {authUser && showScrollHomeBtn ? (
+        <button
+          type="button"
+          className="scroll-home-btn"
+          style={{ left: `${scrollHomeBtnLeft}px` }}
+          onClick={onScrollToHeader}
+          aria-label="Voltar ao cabeçalho"
+          title="Voltar ao cabeçalho"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path d="M11.49 2.26a.75.75 0 0 1 1.02 0l9 8.25a.75.75 0 0 1-1.02 1.1L20 11.12V20a2 2 0 0 1-2 2h-3.75a.75.75 0 0 1-.75-.75V16a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25v5.25a.75.75 0 0 1-.75.75H6a2 2 0 0 1-2-2v-8.88l-.49.49a.75.75 0 0 1-1.02-1.1l9-8.25Z" />
+          </svg>
+        </button>
+      ) : null}
+
       {authLoading ? <div className="status-line">Validando autenticação...</div> : null}
 
       {!authLoading && !authUser ? (

frontend/src/components/ElaboracaoTab.jsx

@@ -37,6 +37,27 @@ const MAPA_RESIDUOS_EXTREMO_LIVRE = 'livre'
 const MAPA_RESIDUOS_EXTREMO_ABS_DEFAULT = MAPA_RESIDUOS_EXTREMO_LIVRE
 const MAPA_RESIDUOS_EXTREMO_ABS_OPTIONS = [2, 3, 4, 5, 6, 7, 8, 10]
 const OUTLIER_RECURSIVO_TOOLTIP = 'Aplicar com recursividade executa os mesmos filtros em ciclos sucessivos: nos bastidores, simula a exclusão dos índices encontrados, recalcula o ajuste do modelo e as métricas de outlier e reaplica os filtros, repetindo até não surgir nenhum índice novo. Para você, o resultado prático é que o campo "A excluir" é preenchido automaticamente com o conjunto total de índices encontrados nessa simulação recursiva.'
+const ELABORACAO_SECOES_NAV = [
+  { step: '1', title: 'Importar Dados' },
+  { step: '2', title: 'Resolver Coordenadas' },
+  { step: '3', title: 'Visualizar Mapa dos Dados Importados' },
+  { step: '4', title: 'Aplicar Filtros' },
+  { step: '5', title: 'Selecionar Data de Mercado' },
+  { step: '6', title: 'Selecionar Variável Dependente' },
+  { step: '7', title: 'Selecionar Variáveis Independentes' },
+  { step: '8', title: 'Estatísticas das Variáveis Selecionadas' },
+  { step: '9', title: 'Teste de Micronumerosidade' },
+  { step: '10', title: 'Gráficos de Dispersão das Variáveis Independentes' },
+  { step: '11', title: 'Transformações Sugeridas' },
+  { step: '12', title: 'Aplicação das Transformações' },
+  { step: '13', title: 'Visualizar Mapa dos Dados de Mercado' },
+  { step: '14', title: 'Diagnóstico de Modelo' },
+  { step: '15', title: 'Gráficos de Diagnóstico do Modelo' },
+  { step: '16', title: 'Analisar Resíduos' },
+  { step: '17', title: 'Exclusão ou Reinclusão de Outliers' },
+  { step: '18', title: 'Avaliação de Imóvel' },
+  { step: '19', title: 'Exportar Modelo' },
+]
 
 function grauBadgeClass(value) {
   const grau = Number(value)
@@ -141,6 +162,22 @@ function parseIndicesFromText(value) {
   return Array.from(indices)
 }
 
+function normalizeSectionSteps(values) {
+  if (!Array.isArray(values)) return []
+  return [...new Set(values.map((item) => String(item || '').trim()).filter(Boolean))]
+    .sort((a, b) => Number(a) - Number(b))
+}
+
+function isSameSectionStepList(currentList, nextList) {
+  if (currentList === nextList) return true
+  if (!Array.isArray(currentList) || !Array.isArray(nextList)) return false
+  if (currentList.length !== nextList.length) return false
+  for (let index = 0; index < currentList.length; index += 1) {
+    if (currentList[index] !== nextList[index]) return false
+  }
+  return true
+}
+
 function toFiniteNumber(value) {
   if (typeof value === 'number') {
     return Number.isFinite(value) ? value : null
@@ -837,6 +874,10 @@ export default function ElaboracaoTab({ sessionId }) {
   const elaboracaoRootRef = useRef(null)
   const [disabledHint, setDisabledHint] = useState(null)
   const [sectionsMountKey, setSectionsMountKey] = useState(0)
+  const [renderedSectionSteps, setRenderedSectionSteps] = useState(() => ['1'])
+  const [visibleSectionSteps, setVisibleSectionSteps] = useState(() => ['1'])
+  const visibleSectionStepsRef = useRef(new Set(['1']))
+  const [sideNavDynamicStyle, setSideNavDynamicStyle] = useState({})
 
   const mapaChoices = useMemo(() => [MAPA_VARIAVEL_PADRAO, ...colunasNumericas], [colunasNumericas])
   const mapaModoDisponivel = mapaVariavel !== MAPA_VARIAVEL_PADRAO
@@ -1248,6 +1289,8 @@ export default function ElaboracaoTab({ sessionId }) {
     ),
   )
   const baseCarregada = Boolean(dados)
+  const renderedSectionStepsSet = useMemo(() => new Set(renderedSectionSteps), [renderedSectionSteps])
+  const visibleSectionStepsSet = useMemo(() => new Set(visibleSectionSteps), [visibleSectionSteps])
 
   const hideDisabledHint = useCallback(() => {
     setDisabledHint(null)
@@ -1302,6 +1345,200 @@ export default function ElaboracaoTab({ sessionId }) {
     })
   }, [])
 
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      setRenderedSectionSteps(['1'])
+      setVisibleSectionSteps(['1'])
+      visibleSectionStepsRef.current = new Set(['1'])
+      return undefined
+    }
+
+    const root = elaboracaoRootRef.current || document
+    const sections = Array.from(root.querySelectorAll('.workflow-section[data-section-step]'))
+    const renderedSteps = normalizeSectionSteps(sections.map((section) => section.getAttribute('data-section-step')))
+    const nextRenderedSteps = renderedSteps.length > 0 ? renderedSteps : ['1']
+
+    setRenderedSectionSteps((current) => (isSameSectionStepList(current, nextRenderedSteps) ? current : nextRenderedSteps))
+
+    if (sections.length === 0) {
+      setVisibleSectionSteps(['1'])
+      visibleSectionStepsRef.current = new Set(['1'])
+      return undefined
+    }
+
+    const getClosestStepToTop = () => {
+      let closestStep = nextRenderedSteps[0] || '1'
+      let closestDistance = Number.POSITIVE_INFINITY
+      const topOffset = 96
+      sections.forEach((section) => {
+        const step = String(section.getAttribute('data-section-step') || '').trim()
+        if (!step) return
+        const rect = section.getBoundingClientRect()
+        const distance = Math.abs(rect.top - topOffset)
+        if (distance < closestDistance) {
+          closestDistance = distance
+          closestStep = step
+        }
+      })
+      return closestStep
+    }
+
+    const addLastStepWhenNearBottom = (steps) => {
+      const normalized = normalizeSectionSteps(steps)
+      const maxScrollY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight)
+      const nearBottom = maxScrollY > 0 && window.scrollY >= maxScrollY - 2
+      if (!nearBottom) return normalized
+      const lastStep = nextRenderedSteps[nextRenderedSteps.length - 1]
+      if (!lastStep) return normalized
+      return normalizeSectionSteps([...normalized, lastStep])
+    }
+
+    const computeVisibleSteps = () => {
+      const topOffset = 96
+      const viewportBottom = window.innerHeight || document.documentElement.clientHeight || 0
+      const nextVisible = addLastStepWhenNearBottom(
+        sections
+          .filter((section) => {
+            const rect = section.getBoundingClientRect()
+            return rect.bottom > topOffset && rect.top < viewportBottom
+          })
+          .map((section) => section.getAttribute('data-section-step')),
+      )
+      const normalizedVisible = nextVisible.length > 0 ? nextVisible : [getClosestStepToTop()]
+      visibleSectionStepsRef.current = new Set(normalizedVisible)
+      setVisibleSectionSteps((current) => (isSameSectionStepList(current, normalizedVisible) ? current : normalizedVisible))
+    }
+
+    computeVisibleSteps()
+
+    const observer = new IntersectionObserver(
+      () => {
+        computeVisibleSteps()
+      },
+      {
+        root: null,
+        rootMargin: '-96px 0px 0px 0px',
+        threshold: [0, 0.05, 0.2, 0.45, 0.7],
+      },
+    )
+
+    sections.forEach((section) => observer.observe(section))
+
+    let frameId = 0
+    const onScroll = () => {
+      if (frameId) return
+      frameId = window.requestAnimationFrame(() => {
+        frameId = 0
+        computeVisibleSteps()
+      })
+    }
+
+    const onResize = () => {
+      computeVisibleSteps()
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onResize)
+
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onResize)
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+      observer.disconnect()
+    }
+  }, [sectionsMountKey, baseCarregada])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined
+
+    const totalSections = ELABORACAO_SECOES_NAV.length
+    let frameId = 0
+
+    const applyMetrics = () => {
+      if (window.innerWidth <= 760) {
+        setSideNavDynamicStyle((current) => (Object.keys(current || {}).length === 0 ? current : {}))
+        return
+      }
+
+      const topOffset = 96
+      const bottomOffset = 14
+      const availableHeight = Math.max(120, window.innerHeight - topOffset - bottomOffset)
+      const maxSize = 34
+      const minSize = 8
+      const maxGap = 8
+      const minGap = 0
+      const totalGapSlots = Math.max(0, totalSections - 1)
+
+      let size = Math.floor((availableHeight - (minGap * totalGapSlots)) / totalSections)
+      if (!Number.isFinite(size)) size = maxSize
+      size = Math.max(minSize, Math.min(maxSize, size))
+
+      let gap = minGap
+      let usedHeight = (size * totalSections) + (gap * totalGapSlots)
+      let remainingHeight = availableHeight - usedHeight
+
+      if (remainingHeight > 0 && totalGapSlots > 0) {
+        const extraGap = Math.min(maxGap - gap, Math.floor(remainingHeight / totalGapSlots))
+        gap += Math.max(0, extraGap)
+        usedHeight = (size * totalSections) + (gap * totalGapSlots)
+        remainingHeight = availableHeight - usedHeight
+      }
+
+      if (remainingHeight > 0) {
+        const extraSize = Math.min(maxSize - size, Math.floor(remainingHeight / totalSections))
+        size += Math.max(0, extraSize)
+      }
+
+      while ((size * totalSections) + (gap * totalGapSlots) > availableHeight && (gap > minGap || size > minSize)) {
+        if (gap > minGap) {
+          gap -= 1
+        } else {
+          size -= 1
+        }
+      }
+
+      const numericFontSize = Math.max(8, Math.round(size * 0.37))
+      const labelFontSize = Math.max(10, Math.round(size * 0.34))
+      const labelOffset = Math.max(8, Math.round(size * 0.3))
+      const nextStyle = {
+        '--elab-nav-size': `${size}px`,
+        '--elab-nav-gap': `${gap}px`,
+        '--elab-nav-font-size': `${numericFontSize}px`,
+        '--elab-nav-label-font-size': `${labelFontSize}px`,
+        '--elab-nav-label-offset': `${labelOffset}px`,
+      }
+
+      setSideNavDynamicStyle((current) => {
+        const currentStyle = current || {}
+        const currentKeys = Object.keys(currentStyle)
+        const nextKeys = Object.keys(nextStyle)
+        const unchanged = currentKeys.length === nextKeys.length && nextKeys.every((key) => currentStyle[key] === nextStyle[key])
+        return unchanged ? currentStyle : nextStyle
+      })
+    }
+
+    const onResize = () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+      frameId = window.requestAnimationFrame(() => {
+        frameId = 0
+        applyMetrics()
+      })
+    }
+
+    applyMetrics()
+    window.addEventListener('resize', onResize)
+    return () => {
+      window.removeEventListener('resize', onResize)
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [])
+
   useEffect(() => {
     if (coordsInfo && !coordsInfo.tem_coords) {
       setCoordsMode('menu')
@@ -3055,9 +3292,48 @@ export default function ElaboracaoTab({ sessionId }) {
     setPercentuais([])
   }
 
+  function onScrollToSecao(step) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') return
+    const targetStep = String(step || '').trim()
+    if (!targetStep) return
+
+    const root = elaboracaoRootRef.current || document
+    const secao = root.querySelector(`.workflow-section[data-section-step="${targetStep}"]`)
+    if (!secao) return
+
+    const offsetTopo = 96
+    const alvo = Math.max(0, window.scrollY + secao.getBoundingClientRect().top - offsetTopo)
+    window.scrollTo({ top: alvo, behavior: 'smooth' })
+  }
+
   return (
     <div ref={elaboracaoRootRef} className="tab-content">
-      <div key={`sections-${sectionsMountKey}`} className="workflow-sections-stack">
+      <div className="elaboracao-layout" style={sideNavDynamicStyle}>
+        <aside className="elaboracao-side-nav" aria-label="Navegação de seções da elaboração">
+          <ol className="elaboracao-side-nav-list">
+            {ELABORACAO_SECOES_NAV.map((secao) => {
+              const rendered = renderedSectionStepsSet.has(secao.step)
+              const visible = visibleSectionStepsSet.has(secao.step)
+              return (
+                <li key={`elab-nav-${secao.step}`}>
+                  <button
+                    type="button"
+                    className={`elaboracao-side-nav-item${visible ? ' is-active' : ''}${rendered ? '' : ' is-unavailable'}`}
+                    onClick={() => onScrollToSecao(secao.step)}
+                    title={`${secao.step} - ${secao.title}`}
+                    aria-current={visible ? 'true' : undefined}
+                    aria-label={`Seção ${secao.step}: ${secao.title}`}
+                  >
+                    <span className="elaboracao-side-nav-index" aria-hidden="true">{secao.step}</span>
+                    <span className="elaboracao-side-nav-label" aria-hidden="true">{secao.title}</span>
+                  </button>
+                </li>
+              )
+            })}
+          </ol>
+        </aside>
+
+        <div key={`sections-${sectionsMountKey}`} className="workflow-sections-stack elaboracao-sections-stack">
       <SectionBlock step="1" title="Importar Dados" subtitle="Upload de CSV, Excel ou .dai com recuperação do fluxo.">
         <div className="section1-groups">
           <div className="subpanel section1-group">
@@ -5139,6 +5415,7 @@ export default function ElaboracaoTab({ sessionId }) {
           </SectionBlock>
         </>
       ) : null}
+        </div>
       </div>
 
       {disabledHint ? (

frontend/src/styles.css

@@ -139,6 +139,35 @@ textarea {
   font-size: 1.02rem;
 }
 
+.scroll-home-btn {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  border: 1px solid #c96c00;
+  background: linear-gradient(180deg, #ffb350 0%, #e67900 100%);
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 8px 18px rgba(122, 64, 0, 0.36),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
+  z-index: 120;
+}
+
+.scroll-home-btn:hover {
+  transform: translateY(-1px) scale(1.04);
+}
+
+.scroll-home-btn svg {
+  width: 19px;
+  height: 19px;
+  fill: currentColor;
+}
+
 .session-id {
   display: inline-block;
   padding: 5px 10px;
@@ -816,12 +845,118 @@ textarea {
   color: var(--ok);
 }
 
+.elaboracao-layout {
+  display: grid;
+  grid-template-columns: calc(var(--elab-nav-size, 34px) + 8px) minmax(0, 1fr);
+  align-items: start;
+  gap: 14px;
+}
+
+.elaboracao-side-nav {
+  position: sticky;
+  top: 96px;
+  align-self: start;
+  z-index: 4;
+}
+
+.elaboracao-side-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--elab-nav-gap, 8px);
+}
+
+.elaboracao-side-nav-item {
+  position: relative;
+  width: var(--elab-nav-size, 34px);
+  height: var(--elab-nav-size, 34px);
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid #c3d2e1;
+  background: linear-gradient(180deg, #f8fbff 0%, #edf4fa 100%);
+  color: #5b7188;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Sora', sans-serif;
+  font-size: var(--elab-nav-font-size, 12px);
+  font-weight: 700;
+  box-shadow: 0 4px 10px rgba(23, 37, 50, 0.14);
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.elaboracao-side-nav-item .elaboracao-side-nav-index {
+  line-height: 1;
+}
+
+.elaboracao-side-nav-item.is-active {
+  border-color: #bf6500;
+  background: linear-gradient(180deg, #ff9f31 0%, #e67900 100%);
+  color: #ffffff;
+  box-shadow:
+    0 6px 14px rgba(230, 121, 0, 0.34),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.elaboracao-side-nav-item.is-unavailable {
+  opacity: 0.58;
+  border-style: dashed;
+}
+
+.elaboracao-side-nav-item:hover,
+.elaboracao-side-nav-item:focus-visible {
+  transform: translateX(3px) scale(1.24);
+  border-color: #d06f00;
+  color: #6c3900;
+  z-index: 2;
+}
+
+.elaboracao-side-nav-item.is-active:hover,
+.elaboracao-side-nav-item.is-active:focus-visible {
+  color: #ffffff;
+}
+
+.elaboracao-side-nav-label {
+  position: absolute;
+  left: calc(100% + var(--elab-nav-label-offset, 10px));
+  top: 50%;
+  transform: translate(-14px, -50%) scale(0.92);
+  transform-origin: left center;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+  border-radius: 999px;
+  border: 1px solid #cf6f00;
+  background: linear-gradient(90deg, #fff4e3 0%, #ffe2bb 100%);
+  color: #7a3f00;
+  box-shadow: 0 10px 24px rgba(112, 62, 9, 0.24);
+  padding: 6px 11px;
+  font-family: 'Sora', sans-serif;
+  font-size: var(--elab-nav-label-font-size, 11px);
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.elaboracao-side-nav-item:hover .elaboracao-side-nav-label,
+.elaboracao-side-nav-item:focus-visible .elaboracao-side-nav-label {
+  opacity: 1;
+  transform: translate(0, -50%) scale(1.24);
+}
+
+.elaboracao-sections-stack {
+  min-width: 0;
+}
+
 .workflow-section {
   border: 2px solid #aebfd0;
   border-radius: var(--radius-lg);
   background: var(--bg-2);
   min-width: 0;
   max-width: 100%;
+  scroll-margin-top: 102px;
   box-shadow:
     0 8px 22px rgba(20, 28, 36, 0.1),
     inset 0 0 0 1px #dfe9f3;
@@ -4555,6 +4690,34 @@ button.btn-download-subtle {
 }
 
 @media (max-width: 760px) {
+  .elaboracao-layout {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .elaboracao-side-nav {
+    top: 68px;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: visible;
+    padding-bottom: 4px;
+  }
+
+  .elaboracao-side-nav-list {
+    flex-direction: row;
+    gap: 6px;
+  }
+
+  .elaboracao-side-nav-label {
+    display: none;
+  }
+
+  .elaboracao-side-nav-item {
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+  }
+
   .tabs {
     grid-template-columns: 1fr;
   }