PADRÕES · 01 · APP SHELLSidebar por grupo de tarefa, topbar com a obra em foco, breadcrumb rastreável e barra de status que diz de qual medição vem cada número. Três estados abaixo, com a medida de cada região.
Números da Times Square pela fonte orçamento: vigente de 22/06/2026, R$ 23.939.636,08, com avanço físico ponderado por custo. Pelo cronograma o custo é R$ 22.264.088,85, diferença de R$ 1.675.546,12 ou 7,0%, e o avanço ponderado por duração é 52%. A divergência de escopo segue em apuração.
ESTADO A · SIDEBAR EXPANDIDAPadrão em telas de 1280px ou mais. O rótulo do grupo fica em mono para separar navegação de conteúdo, e o item ativo carrega barra teal de 2px mais fundo teal-ghost.
Base: orçamento vigente de 22/06/2026, R$ 23.939.636,08 · corte da medição em 31/07/2026
| EAP | Grupo | Orçado | Desvio |
|---|---|---|---|
| 9. | Revestimentos e acabamentos | 3.878.221,04 | +201.279,67 |
| 3. | Estrutura de concreto armado | 4.740.047,96 | +137.461,39 |
| 6. | Instalações elétricas e SPDA | 1.687.744,34 | +40.505,86 |
ESTADO B · SIDEBAR COLAPSADAGanha 192px de largura para a tabela de EAP, que é o conteúdo mais largo do produto. Ícone centralizado em alvo de 44px, rótulo do grupo reduzido a duas letras e nome completo no aria-label de cada item.
| EAP | Grupo | Orçado | Executado | Avanço | Tendência | Desvio |
|---|---|---|---|---|---|---|
| 9. | Revestimentos e acabamentos | 3.878.221,04 | 302.501,24 | 7,8% | 4.079.500,71 | +201.279,67 |
| 3. | Estrutura de concreto armado | 4.740.047,96 | 2.867.729,02 | 60,5% | 4.877.509,35 | +137.461,39 |
| 6. | Instalações elétricas e SPDA | 1.687.744,34 | 556.955,63 | 33,0% | 1.728.250,20 | +40.505,86 |
| 2. | Fundações e contenção | 2.178.506,88 | 2.178.506,88 | 100,0% | 2.212.273,74 | +33.766,86 |
| 5. | Instalações hidrossanitárias | 1.532.136,71 | 543.908,53 | 35,5% | 1.559.715,17 | +27.578,46 |
| 8. | Esquadrias, vidros e serralheria | 1.963.050,16 | 186.489,77 | 9,5% | 1.939.493,56 | -23.556,60 |
Mesma tabela do estado A, agora com as sete colunas visíveis sem rolagem horizontal.
ESTADO C · MOBILE COM NAVEGAÇÃO INFERIORAbaixo de 900px a sidebar sai de cena e vira gaveta pelo botão de menu. As quatro tarefas de campo ficam no polegar, e a barra de status continua visível porque saber de qual medição vem o número é parte do produto.
Corte em 31/07/2026
| EAP | Desvio |
|---|---|
| 9. Revestimentos | +201.279,67 |
| 3. Estrutura | +137.461,39 |
| 6. Elétrica e SPDA | +40.505,86 |
REFERÊNCIA · MEDIDAS DAS REGIÕESTudo múltiplo de 4px, conforme a escala do sistema. Alterou aqui, alterou em todas as telas do Acompanhamento de Obras.
| Região | Desktop | Mobile | Regra |
|---|---|---|---|
| Sidebar expandida | 264px | gaveta 288px | Grupo em mono, item de 44px, ativo com barra teal de 2px |
| Sidebar colapsada | 72px | não se aplica | Ícone de 18px centralizado, nome no aria-label |
| Topbar | 64px | 56px | Seletor de obra à esquerda, busca ao centro, conta à direita |
| Breadcrumb | 44px | 36px | Separador em mono, último item sem link |
| Área de conteúdo | padding 24px 32px | padding 16px | Conteúdo limitado a 1240px, tabela larga rola sozinha |
| Barra de status | 36px | 32px | Medição vigente, sincronização, ambiente e versão |
| Navegação inferior | não se aplica | 64px + 8px | Máximo de 4 itens, alvo de 56px, ativo com ponto teal |
| Quebra de layout | 1280px | 900px | Abaixo de 900px a sidebar sai do fluxo |