Pular para o conteúdo
PCPR Gestão de Eventos e Viagens Polícia Civil do Paraná PREVIEW

UI Lab

Vitrine viva: todos os componentes em todos os estados. Hover, foco e ativo são exercitados com mouse e teclado (e pelos testes visuais automatizados).

Componentes

Acabamento operacional de Ofícios

Selos indivisíveis, instruções longas e pessoas vinculadas por outro registro. Estados sintéticos para validar largura, foco e teclado.

Rascunhofaltam 120 diasJustificativa pendente
Informe o protocolo do eProtocolo antes de emitir. O rascunho pode continuar sendo preenchido e salvo. Confira o vínculo do motorista com o ofício de origem.
Motorista de fora da equipeVai por outro ofício; não entra nas diárias desta equipe.
ABC1D23 · Chevrolet S10 Diesel · Caracterizada · DPC
DEF4G56 · Renault Duster Gasolina · Descaracterizada · Unidade de exemplo Selecionada pelo motorista

Agenda e conferência de preparação

Conteúdo com largura útil, período e horário proporcionais. Campos livres entram na linha seguinte. A conferência recebe as pendências do fluxo, sem calcular regras.

Conferência do cadastro

Tudo preenchido: dá para gerar o plano

Lançamentos quantitativos

Exemplos de lançamentos
AtividadeMeta previstaRealizadoObservação
Confecção da Carteira de Identidade Nacional Ampliar o acesso à documentação civil.
Orientações institucionais fora do plano Atividade retirada com resultado preservado.

Registro operacional

Cabeçalho de página e registro com identidade, missão, recursos e conferência. No celular, selos inteiros em faixa própria; período e protocolo à esquerda das diárias. Dados sintéticos, sem operações.

Ofício 131/2026

Gestão institucional

Preparar a viagem

Equipe, percurso e documentos em uma mesma área de trabalho.

1Preparação

Título e orientação em coluna editorial. Os campos mantêm rótulos e controles do sistema.

1Botões

VariantePadrãoCom íconeDesabilitadoCarregando Primário Marca Secundário Sutil Perigo

Linguagem de ação (ocioso → processando → concluído / recusado)

Link com aparência de botão

2Campos de formulário

Padrão

Nove dígitos, com ou sem pontuação.

Erro (validação do servidor)

Este campo é obrigatório.

Nove dígitos, com ou sem pontuação.

Este campo é obrigatório.

Sucesso, desabilitado, somente leitura, composto e longo

Viatura encontrada no cadastro.

/ 2026
Custeio (.escolhas)
Marcador (.escolhas--linha)

3Combobox, busca, data, hora e lista

Sem JavaScript, vira um select comum.

Calendário próprio; também aceita digitar (máscara dd/mm/aaaa).

Relógio: horas e minutos de 5 em 5.

Lista própria sobre um select comum (sem JS, vira o select).

(data)(hora)

Data e hora lado a lado, como nos trechos do roteiro.

(data)(hora)

Informe data e hora, ex.: 08/10/2026 09:00.
  • ANA BEATRIZ CORREIA LIMAAgente de Polícia Judiciária • DM

Escolher na busca acrescenta (sem repetir); “Remover” tira. Cada escolhido vai num campo oculto do mesmo nome.

Efetivo (linhas repetidas)
Atividades (caixas de escolha)

4Status, alertas e toasts

RascunhoEm preenchimentoPronto para emitirEmitidoJustificativa pendenteCanceladoMotoristafaltam 7 diasGerando PDFEmitido

Linguagem de estado: a forma do marcador diz o estado antes do texto

Rascunho (anel vazio: incompleto)Emitido (✓: concluído)Cancelado (×: encerrado)Vigente (ponto cheio)Processando (pulso)

Placa e trilho de processo (assinatura visual)

  1. Rascunho
  2. Emitido
  1. Rascunho
  2. Emitido
  1. Rascunho
  2. Cancelado

Informação

O número do ofício é reservado ao salvar o rascunho e confirmado na emissão.

Ofício 131/2026 emitido

O PDF foi gerado e está disponível na seção Documentos.

Conflito de agenda

  • Ana Beatriz Correia Lima já está no Ofício 129/2026 de 09/10 a 11/10/2026 (Arapongas/PR).
  • Viatura ABC-1234 já está no Ofício 129/2026 no mesmo período.

É só um aviso: confira com a outra equipe; dá para salvar assim mesmo.

6Cartões, indicadores e pessoas

Ofícios no mês18↑ 4 em relação a agosto Justificativa pendente5Viagens com menos de 10 dias
Diárias no mêsR$ 42.318,90Conteúdo longo não estoura
Viagens em 30 dias0Estado zerado

Responsável pelo preenchimento

Nome
Operador Teste
Unidade
Assessoria de Comunicação
Protocolo
Não informado
AL
Ana Beatriz Correia Lima
Agente de Polícia Judiciária • DM
Com termo
BM
Bruno Henrique Martins Motorista
Agente de Polícia Judiciária • DM

7Tabelas, filtros e listas

Filtrando porLimpar tudoVeículo: ÔnibusAno do número: 2026Limpar tudo
Ofícios de exemplo
Número DestinoServidoresValorSituaçãoAções
Ofício 131/2026Protocolo 12.345.678-9 Arapongas/PR Ana Beatriz Correia Lima, Bruno Henrique Martins R$ 2.411,56 Emitido
Ofício 129/2026Protocolo 12.345.678-9 Antonina/PR Carla Regina Duarte R$ 2.324,40 Pronto para emitir
Ofício 128/2026Protocolo 12.345.678-9 — — R$ 0,00 Rascunho
Ofício 127/2026Protocolo 12.345.678-9 Rio Branco do Ivaí/PR Diego Fernandes Rocha, Elaine Cristina Moraes, Fábio Augusto Teixeira, Gabriela Nunes Ribeiro R$ 1.336,54 Justificativa pendente
Ofício 126/2026Protocolo 12.345.678-9 Fortaleza/CE Henrique Lopes Batista R$ 853,90 Cancelado
TotalR$ 6.926,40

8Diálogos, gaveta, menu e paleta de comandos

Explorar as três composições do Resumo
Anexar via assinada Trocar via assinada

Menu de linha com itens descritos (⋮ canônico, D7)

Título + o que a ação faz (ou por que está inativa) — a descrição sai do nome do item e entra como descrição (aria-describedby). Itens de leitura sem descrição. Grupos por separador: ler/levar o documento · criar a partir dele · marcas · situação · excluir; o que se faz uma vez por registro (criar, marcas) vem recolhido e abre no lugar (Enter/Espaço/→; ← recolhe). No desktop o painel sobe para a camada de topo sobre um véu invisível (o toque fora só fecha), abre abaixo, acima ou ao lado do botão e nunca sai da janela; no celular vira folha inferior com o nome do registro. Item inativo recebe o foco e não age. Nas listas os itens chegam do servidor quando o mouse ou o foco chega ao ⋮.

← abra pelo mouse ou com Enter/↓; ↑/↓, Home/End e Esc.

Barra fixa da lista com "Mais" (D8)

Voltar

42 de 255 ofícios

Exportar planilha
Assinado Assinado, mas os dados mudaram

9Estados vazios e carregamento

Nenhum ofício ainda

Comece criando o primeiro ofício de viagem da sua unidade.

Novo ofício

Nenhum resultado para “Tamarana”

Confira a grafia ou remova filtros para ampliar a busca.

Limpar filtros

Nenhum rascunho pendente

Tudo em dia por aqui.

Nenhum resultado nesta fila

Remova os filtros para ampliar a busca.

Limpar filtros
Calculando diárias…

12Peças do formulário do ofício

Cartões de escolha (rádio nativo; teclado com setas)

Sede e destinosSede e bate-voltas

  1. Bate-volta 1
    Ida
    Volta

    Sai e volta todo dia do período, nesses horários. O tempo de estrada vem da rota.

  1.
  2. Destino 1

  4. Volta à sedeCuritiba/PR

O mapa traça a rota assim que houver a sede e um destino.

Ida—— Ida e voltaVolta——

Trechos

Gerados pelos bate-voltas: para mudar um horário, mude o bate-volta.

  1. Deslocamento

    Trecho 1: Curitiba/PR Ponta Grossa/PR

    (data)(hora)
    Chegada · calculada
    —
  2. Retorno à sede

    Volta à sede: Ponta Grossa/PR Curitiba/PR

    (data)(hora)
    Chegada na sede · calculada
    —

2 itens faltam para emitir

  • Dados
  • Equipe
  • Roteiro
  • Justificativa

Tudo pronto para emitir

Incluir justificativa mesmo assim (opcional)

Conteúdo revelado sob demanda, sem caixa.

10Sistema de foco e microinterações

Percorra com Tab: o anel é grafite com halo claro (nunca o azul do navegador); sobre o grafite vira dourado; campos acendem em vez de ganhar anel externo. Tokens --foco-*.

Link-botão Link no texto
Sobre superfície escura Entrar Link claro

11Laboratório de conceitos (A / B / C)

Três abordagens por componente; a escolhida está marcada. As descartadas ficam aqui como registro da exploração (docs/design-system/explorations.md).

Botão de ação

A · Pílula com toast

Feedback fora do botão; o operador olha para outro lugar.

B · Linguagem de ação

Processa e confirma no próprio lugar; largura estável; recusa balança.

C · Barra de progresso interna

Progresso falso (não há etapas reais); descartado.

Status

A · Pílula só por cor

RascunhoEmitidoCancelado

Depende de ler; cor não diferencia estado de progresso.

B · Forma do marcador

RascunhoEmitidoCancelado

Anel vazio / ✓ / × — entende-se de relance; a mesma gramática no trilho e no progresso.

C · Só trilho

  1. Rascunho
  2. Emitido

Ótimo no detalhe, largo demais na lista; mantido só no detalhe.

Campo de texto

A · Caixa branca, rótulo na borda

Escolhida na 3ª rodada: é a linguagem do sistema de referência, que os usuários já leem sem esforço. A identidade fica no foco (borda grafite + halo dourado) e no rótulo que acende.

B · Linha de papel

Bonito em formulários curtos; em grades densas o alvo some. Descartado.

C · Campo aceso

Área tingida em repouso; ao focar fica branco, borda grafite, halo dourado — e o rótulo acende.

Registro de lista

A · Linha com ícone

Número perdido no título; ícone genérico.

B · Placa + grupo + resumo em janela

Leitura rápida pelo número, grupos por mês e, no clique, o resumo numa janela — a lista não se mexe.

C · Tabela densa

NºDestinoSituação
131/2026Arapongas/PREmitido
130/2026Campo Grande/MSRascunho

Mais linhas por tela, mas perde equipe/transporte sem rolagem horizontal no celular. Descartado.

Progresso do formulário (stepper)

A · Índice lateral fixo

  1. Dados
  2. 2Equipe

Painel lateral estreito que comprime o formulário. Descartado.

B · Faixa de progresso

Ocupa uma linha, mostra o quanto falta e a forma de cada seção; o formulário respira.

C · Só barra

Diz "quanto" mas não "o quê". Descartado.

Linha do tempo

A · Vertical em painel lateral

  1. Emitido

    01/10 10:09

  2. Dados alterados

    01/10 09:17

Rouba 20rem de largura do documento. Descartado.

B · Colunas + disclosure

  1. Emitido

    01/10 10:09

  2. Dados alterados

    01/10 09:17

Ver histórico completo (10 eventos)Ocultar histórico completo

Abaixo do documento, em duas colunas; o resto sob demanda.

C · Linha única compacta

01/10 10:09 Emitido · 09:17 Dados alterados · 09:12 Equipe

Compacta demais para auditoria. Descartado.

13Editor de documento no visualizador

A folha do documento (a mesma que vira PDF) com as regiões editáveis, campos vivos, blocos, quebras, textos prontos e histórico. Aqui é vitrine: edita, formata e insere, mas nada é salvo.

14Equipe da prestação de contas

Um bloco por ofício, um cartão (formulário) por servidor: os campos gravam sozinhos e o estado aparece no próprio cartão; as ações vêm depois dos campos.
Ofício 12/2026

Londrina/PR

07/10 a 09/10/2026R$ 1.240,00 em diárias2 servidores
  • Ana ExemploSaque vence em 2 dias

    Diária liberada: R$ 620,00 · prestar contas até 14/10/2026.

    Salvo automaticamente às 14:32

  • Bruno ExemploFinalizada

    Diária liberada: R$ 620,00 · Nº 2026/0413 · liberada em 06/10 · saque até 09/10.

15Diário de bordo: modos e linhas

Modos com campos próprios (só aparecem os do modo marcado) e uma linha por trecho com rota, horários, previsto e os três campos.
Motorista

  1. Curitiba/PR → Londrina/PR

    07/10/2026 08:00 → 07/10/2026 13:30 · previsto 380 km

    Distância rodada385 km

Londrina/PR → Curitiba/PR: o km de saída (40.300) é menor que o de chegada do trecho anterior (40.385) — o hodômetro voltou para trás.

16Sugerir e copiar texto

Preenche os campos sem gravar (o autosave grava ao receber o texto); com texto no campo, pergunta antes de substituir. "Sugerir texto" pede ao servidor (regra local); "Copiar textos" copia de outro registro.
  • Ana Luiza de Souza Liberada R$ 482,64
  • José Carlos de Albuquerque Liberada R$ 915,23 Prestação finalizada
    Valor recebido

    R$ 915,23

17Agenda do mês

Grade montada no servidor (domingo a sábado); cor da borda pelo tom (info, aviso, perigo); prazo com relógio; feriado como faixa do dia; cancelado riscado. No celular, vira lista dos dias com algo.
DomSegTerQuaQuiSexSáb
4 5 6 7 8 9 10Feriado (exemplo)

18Gráficos simples

Sem biblioteca e sem estilo inline (CSP): a série usa a altura do <rect> de um SVG (viewBox de 100) com o número escrito sobre a barra; o ranking usa <progress> nativo. O mês atual em dourado.
  1. 8 em maio
  2. 16 em junho
  3. 4 em julho
  1. 3 em nov/25
  2. 8 em dez/25
  3. 5 em jan/26
  4. 2 em fev/26
  5. 9 em mar/26
  6. 6 em abr/26
  7. 4 em mai/26
  8. 1 em jun/26
  9. 7 em jul/26
  10. 2 em ago/26
  11. 6 em set/26
  12. 3 em out/26
  1. RPC12
  2. Banda B5 · 4 atendidos

19Etapas de um fluxo

Marcos numerados: concluídos com ✓ (verde), o atual em grafite com aria-current="step", os que faltam apagados. No celular, empilham. Usado no andamento das palestras.
  1. Recebida (concluída)
  2. Aguardando retorno
  3. Agendada
  4. Atendida

20Copiar um texto

Campo só de leitura com o botão "Copiar" (data-copiar-alvo): copia para a área de transferência e diz "Copiado" por um instante (aria-live no botão); sem a API, seleciona o texto para o Ctrl+C. Usado nos textos do eProtocolo.
Dados para o eProtocolo

Dados salvos do rascunho. Copiar não abre nem altera o protocolo.

21Linha das listas de Viagens

Registros de viagem: identificação, destino, situação, período, relações e ações. O exemplo operacional de Roteiro usa a composição vigente de Ofícios, com uso e estimativa financeira em grupos próprios. As variantes anteriores permanecem durante a migração de seus consumidores. Confira conteúdo longo, estado cancelado, foco e larguras menores.

Selo de tempo — o mesmo vocabulário nas três listas

Falta mais que o prazo
faltam 30 dias
Dentro do prazo (≤ 10 dias)
faltam 7 dias
Amanhã
amanhã
Viagem de um dia, hoje
hoje
Começa hoje
começa hoje
Em andamento
em andamento · até 18/10
Volta hoje
volta hoje
Já terminou (sem selo)
nenhum selo
Sem data (sem selo)
nenhum selo

Tipo do ofício (só o que foge do comum) e alerta de justificativa

ConvalidaçãoRetificadoComplementarConvalidação · ComplementarJustificativa pendenteAutorização, o caso comum, não ganha selo (aparece no resumo).

Linhas: normal, alerta, em andamento, sem dados, cancelada e inativa

Ofícios demonstram a variante documental: colunas de leitura no desktop e faixas próprias no celular. Os demais exemplos conservam sua composição.

  • Outubro de 2026
  • Ofício 131/2026 · Arapongas/PR, Londrina/PR, Maringá/PR e mais 2 destinos Emitidofaltam 30 dias
    Período: 13/11 a 15/11/2026 Protocolo 12.345.678-9
    Equipe: Bruno Henrique Martins (motorista), Ana Beatriz Correia Lima, Carla Regina Duarte e mais 1 Transporte: ZZZ-0000 · Renault Master Diárias: R$ 2.411,564 × 100% + 1 × 15%
  • Ofício 129/2026 · Antonina/PR RascunhoConvalidaçãoJustificativa pendente
    Período: 12/10 a 18/10/2026 Sem protocolo
    Equipe: Elaine Moraes (motorista de fora da equipe), Carla Regina Duarte Transporte: Veículo cedido pela Prefeitura de Antonina Sem diárias
  • Ribeirão do Pinhal/PRCancelado
    02/11 a 03/11/2026

    Motivo do cancelamento: evento adiado pelo município. O registro conserva os dados e o histórico.

    12 no efetivo
    R$ 12.790,68

Documentos relacionados

Documentos para vincular — exemplo

22Barra de filtros das listas

Padrão D6 (lista de ofícios): abas pelo tempo da viagem (aba sem resultado recua, mas continua clicável) · Busca · Documento (segmentado, um clique, rótulo na borda; "Todos" sem número porque os outros não somam o todo) · Filtros (n) — Documento e Filtros andam juntos (se não couberem ao lado da busca, descem juntos). A situação do documento não vira ficha: o segmentado já diz. A gaveta nunca abre sozinha; o que vale vira ficha removível, com "Limpar tudo" que mantém a busca e a aba. Esc, clique fora e "Fechar" fecham a gaveta (Esc e Fechar devolvem o foco ao botão); no celular ela é uma folha inferior MODAL sobre um véu (resto da página inerte, página parada, Tab cicla dentro, foco no 1º campo; calendário e listas sobem para a camada de topo e não são recortados), e Documento e fichas rolam de lado com a borda esmaecida. Busca ao vivo que falha (rede/servidor) troca os resultados pelo aviso com "Tentar de novo".
Filtrando porLimpar tudoVeículo: ÔnibusAno do número: 2026Ordem: Saída, mais antiga primeiroLimpar tudo
  • Outubro de 2026: 4 ofícios nesta página

Nenhum ofício encontrado

Confira o número (ex.: 131/2026), o protocolo, a placa ou o nome — ou tire um filtro.

Limpar filtrosLimpar buscaVer todos

23Data do evento e lotação das viaturas

Termo de autorização. Calendário de mesa (.mesa-evento): as folhas do primeiro e do último dia, a duração, de onde vem a data e a ida/volta quando a viagem é maior; sem campo de texto — o botão do calendário (ou as folhas) abre o seletor, e a folha da frente levanta de leve ao passar o mouse. Lotação (.frota + .lotacao): viaturas em cartões e, com mais de uma, um seletor segmentado (.escala) por servidor, com o realce que desliza até a escolhida (termo.js; sem JS, a opção marcada ganha o fundo).

Data do evento

20 a 21 de outubro de 2026

Período do evento — Plano de Trabalho 02/2026/ASCOM

Viagem 20/10 a 09/11

  • ZZA6A38Renault Duster · do ofício1
  • ZZF1J03Chevrolet S10 · do ofício1

Quem vai em cada viatura

  • Adriana Dornelles FontanaAgente de Polícia Judiciária
  • Yasmin Ribeiro QuintelaInvestigador de Polícia

Preparação documental

Contexto e edição, conferência de emissão e salvamento. Exemplos sintéticos, sem gravação.

Informe a justificativa antes de emitir.

Conferência do cadastro

Tudo pronto para emitir

Confira o ofício e confirme a emissão na revisão.

Conferência do cadastro

1 item falta para emitir