PROC005 Reformulação Tela Principal O.S.

	Projeto/Sistema: O.S. - GerencieAqui	Versão do Template: 1.2
	Processo: PROC005 Reformulação Tela Principal O.S.	Versão do Documento: 1.0
	Responsável(eis):  Luís Leite	Data:  20/10/2025

1. Introdução

Este processo visa exemplificar a reformulação da tela principal da Ordem de Serviço

Processo	Envolvidos	Dados de Entrada	Dados de Saída
PROC005 Reformulação Tela Principal O.S.	-	Nova ordem de serviço ou edição dos dados da ordem de serviço	Ordem de Serviço salva ou alterada
PROC005.1 Reformulação Tela Principal O.S. - Detalhes	-	Nova ordem de serviço ou edição dos dados da ordem de serviço	Ordem de Serviço salva ou alterada
PROC006 Reformulação Tela de Listagens da O.S.	-	Filtros de período e etapas das O.Ss	Listagem filtrada de ordens de serviço
PROC007 OS Modo Visualização	-	-	-

Processos Relacionados

---

PROC005.1 Reformulação Tela Principal O.S. - Detalhes

PROC006 Reformulação Tela de Listagens da O.S.

PROC007 OS Modo Visualização

Especificação Funcional

---

PROC001 Tela de Ordem de Serviço:

Protótipo de Tela:

Imagem I - Tela Principal da OS

Regras de Interface Principais:

1. As etapas da O.S. serão separadas em Accordions que inicialmente serão renderizados "abertos".

2. No topo da tela deve ser adicionado a data e hora de abertura da O.S.

3. Botão Voltar:
Ao clicar sobre o botão deve retornar a tela de listagem de Ordens de Serviço.

4. Botão Próximo:
Caso esteja na primeira aba "Cliente e Equipamento" a ação do botão deve direcionar para o preenchimento da próxima aba "Detalhes da OS". Estando na Aba "Detalhes da OS" o botão "Próximo" não deve ter mais efeito.

5. Botão Salvar:
A ação do botão deve fazer todas as validações de campos obrigatórios, caso algum campo não seja validado deve ser retornado em tela a mensagem de aviso. Deve ser retornado para cada campo não validado:

O campo X é de preenchimento obrigatório!

5.1 Caso passe por toda a validação para salvar, deve ser retornado para a tela de listagem de O.S. e retornar o aviso positivo em tela

Ordem de Serviço salva com sucesso.

Regras de Negócio Principais:

1. Botão Salvar:
A ação do botão deve fazer todas as validações de campos obrigatórios, caso seja uma nova Ordem de Serviço realiza o novo cadastro no banco de dados; caso se trate de uma edição, realiza a alteração do registro selecionado.

1 Accordion Cliente:

Protótipo de Tela:

Imagem II - Accordion Cliente

Descrição dos Campos:

Campo	Tipo	Tamanho	Obrig. ?	Máscara	Observações
Cliente	Texto	-	Sim	-	Autocomplete
Telefone	Texto	-	-	-	-
E-mail	Texto	-	-	-	-

Regras de Interface:

2. Cliente*:
Campo obrigatório de seleção (dropdown/autocomplete) para Cliente. Deve conter o placeholder "Selecione um cliente"

2.1 Botão adicionar cliente  :
A ação do botão deve abrir a Dialog existente do cadastro de clientes no módulo.

2.2 Caso não seja localizado nenhum cliente na pesquisa, deve ser retornado o aviso em tela:

Atenção
Cliente X não encontrado

3. Telefone:
O Campo serve apenas para visualização, vai trazer em tela o telefone dos dados de contato do cliente quando for selecionado. Deve conter o placeholder "(11) 99999-9999"

4. E-mail:
O Campo serve apenas para visualização, vai trazer em tela o E-mail dos dados de contato do cliente quando for selecionado. Deve conter o placeholder "cliente @cliente.com"

2 Accordion Produtos e Serviços:

Protótipo de Tela:

Imagem III - Accordion dos produtos

Descrição dos Campos:

Campo	Tipo	Tamanho	Obrig. ?	Máscara	Observações
Card adicionar Produto/Serviço
Produto	Texto	-	Sim	-	Campo Autocomplete. Placeholder: "Adicione um Produto ou serviço"
Quantidade	Decimal	8	Sim	0,0	Placeholder: "Quantidade do Produto"
Valor Unitário	Decimal	18	Sim	0,00	Placeholder: 0,00
Desconto	Decimal	8	-	0,00	Placeholder: 0,00
Grade	Select	-	-	-	-
Lote	Texto	-	-	-	Campo Autocomplete.
Adicionar Produto/Serviço	Botão	-	-	-	-
Listagem
Produtos/Serviço	Column Header	-	-	-	-
Código	Column Header	-	-	-
Quantidade	Column Header	-	-	-
Valor Unit.	Column Header	-	-	-
Desconto	Column Header	-	-	-
Subtotal	Column Header	-	-	-
Ações	Column Header	-	-	-	A escolher entre "Editar" e "Excluir"
Card Desconto
Valor do Desconto	Decimal	8	-	-	Placeholder: "Valor do Desconto"
Porcentagem de Desconto	Decimal	3	-	-	Placeholder: "Porcentagem do Desconto"
Aplicar Desconto	Botão	-	-	-	-
Card Resumo Financeiro
Produtos	Texto	-	-	-	-
Serviços	Texto	-	-	-	-
Descontos	Texto	-	-	-	-
Total	Texto	-	-	-	-

Regras de Interface:

1. Adicionar Produto/Serviço

1.1 Campo Produto:
Campo de seleção (dropdown/autocomplete) para Produto. Seguir comportamento atual para like com no mínimo 3 caracteres digitados no campo.

1.2 Quantidade:
Deve conter o placeholder "Quantidade do Produto"

1.3 Valor Unitário:
Deve conter o placeholder "0,00"

1.4 Desconto:
Deve conter o placeholder "0,00"

1.5 Grade:
Campo por padrão fica oculto, só deve ser renderizado quando o produto localizado possuir grade em seu cadastro. 

1.6 Lote:
Campo por padrão fica oculto, só deve ser renderizado quando o produto localizado possuir lote em seu cadastro. 

1.7 Botão “➕” "Adicionar Produto/Serviço":
Caso possa ser adicionado o produto, ele deve ser inserido na listagem. Do contrario deve ser exibido as seguintes validações de acordo com as regras de negócio.
Produto não localizado ou quantidade zerada:

Escolha um produto e informe a quantidade e preço unitário! 

Cliente não vinculado na Ordem de Serviço:

Informe o cliente.

2. Listagem de Produtos:

Produto/Serviço: Exibe o nome do produto ou serviço inserido, permite ordenação ASC ou DESC.
Código: Exibe o código de barras ou SKU do produto ou serviço, permite ordenação ASC ou DESC.
Quantidade: Exibe a quantidade inserida do produto ou serviço, permite ordenação ASC ou DESC.
Valor Unitário: Exibe o valor unitário inserido do produto ou serviço, permite ordenação ASC ou DESC.
Desconto: Exibe o desconto inserido do produto ou serviço, permite ordenação ASC ou DESC.
Subtotal: Exibe o subtotal do produto ou serviço, permite ordenação ASC ou DESC.
Ações (✎ editar / 🗑 excluir):

• • • • • Editar : Libera as colunas de Quantidade, Valor Unitário e Desconto do produto/serviço para edição. Durante a edição da linha de registro, devem ser exibidos no lugar dos botões de edição e exclusão os botões de confirmação e cancelamento de alteração:

          

          • :Deve manter a alteração realizada no registro da listagem

          • :Deve retornar ao estado anterior, cancelando a edição salva em memoria.

      •  
        • Exclusão : Deve abria a dialog com a validação "Tem certeza que deseja excluir este item?" Caso sim, remover o produto da listagem em tela, somente remover do banco de dados ao salvar a Ordem de Serviço.

2.1. O rodapé da lista deve ter um totalizador do subtotal.

3. Card Desconto:

3.1 Desconto em Valor:
Deve conter o placeholder "Valor do Desconto". 
3.2 Desconto em Percentual:
Deve conter o placeholder "Percentual de Desconto". 

4. Card Resumo Financeiro:

4.1 Produtos:
Label com o total de produtos inseridos na O.S. Deve ser sempre atualizado conforme mudança de itens inseridos.
4.2 Serviços:
Label com o total de produtos inseridos na O.S. Deve ser sempre atualizado conforme mudança de itens inseridos.
4.3 Descontos:
Label com o total de descontos na O.S. (Tanto de Itens quanto do Card Descontos). Sempre atualizado conforme mudanças de valores na O.S.
4.4 Total: 
Label da soma de todos os valores da O.S. = (Produtos + Serviços) - Descontos

Regras de Negócio:

1. Card adicionar Produto/Serviço:

1.7 Botão “➕” "Adicionar Produto/Serviço":
Deve ser validado antes da inserção se o campo de quantidade é diferente de zero, caso esteja zerado inserir como 1 a quantidade do produto.
Deve ser validado se existe um cliente vinculado a Ordem de Serviço, caso não exista, não deve ser permitida a inserção do item.

2. Listagem de Itens:

2.1 Subtotal da Listagem:
O subtotal é calculado automaticamente - Subtotal = (Valor Unitário × Quantidade) - Desconto

2.2 Exclusão: A exclusão só deve ocorrer ao salvar a O.S. finalizando ela. As alterações são mantidas em memória e caso o usuário feche a dialog, as alterações são descartadas. 

3. Card Desconto:
Deve ser possível aplicar um desconto em valor e/ou percentual em cima do subtotal de produtos e/ou serviços lançados.

3 Accordion Equipamento:

Protótipo de Tela:

Imagem IV - Accordion de equipamentos

Imagem V - Tooltip do equipamento

Imagem VI - Anexo de equipamento (ESSA TELA PRECISA SER FEITA NO FIGMA)

Descrição dos Campos:

Campo	Tipo	Tamanho	Obrig. ?	Máscara	Observações
Tipo de Equipamento*	Texto	-	Sim	-	SelectBox
	Tooltip
Equipamento*	Texto	-	Sim	-	AutoComplete
Adicionar Especificações	Link	-	Não	-
Problema Relatado	Texto	244	Sim	-	Placeholder: Descreva o problema relatado pelo cliente
Laudo Técnico	Texto	244	Não	-	Placeholder: Descreva o diagnóstico e procedimentos realizados...
Anexo	Botão	-	Não	-
Checklist de equipamento	-	-	Não	-
Redefinir Checklist	Botão	-	-	-

Regras de Interface:

1. Tipo de Equipamento*:
O evento do campo deve listar tipos de equipamentos registrados pelo usuário, deve conter o Placeholer "Selecione o tipo" detalhes em: PROC001 - Cadastro de Tipo de Equipamento

2. O tooltip deve listar a seguinte informação: 
"O tipo de equipamento será utilizado para a personalização da sua OS. Cadastre um tipo de equipamento, como um veiculo e um campo chave, como placa. Nos campos adicionais, inclua informações como ano, modelo e chassi."

3. Equipamento:
Campo de nome ou identificação do equipamento. AutoComplete. Deve conter o Placeholder: "Ex: Macbook Air M2"

4. Adicionar Especificações:
Abre a Dialog do PROC005.1 - ADICIONAR ESPECIFICAÇÕES

5. Problema Relatado:
Deve haver um Label no rodapé do campo contabilizando a quantidade de caracteres restantes.
Deve conter o Placeholder "Descreva o problema relatado pelo cliente"

6. Laudo Técnico:
Deve haver um Label no rodapé do campo contabilizando a quantidade de caracteres restantes.
Deve conter o Placeholder "Descreva o diagnóstico e procedimentos realizados..."

7. Anexos de Conferência:
Ao clicar deve ser chamado o gerenciador de arquivos do computador, para a seleção do arquivo.
Linha com 3 anexos renderizados. Deve ser gerada outra linha com o restante.
O anexo deve ser renderizado em tela caso permitida mais uma nova inserção ou se permitido o tamanho do arquivo, caso contrario deve ser retornado a mensagem:

Não foi possível inserir anexo, confira a quantidade anexada e o tamanho do arquivo!

7.1 Ao ser adicionado um anexo, deve ser renderizado em tela o arquivo carregado.

7.2 Ações com anexos:

• • • • Visualizar: Deve ser possível abrir a visualização do arquivo anexado.
      • Exclusão: Deve permitir a remoção do anexo.
        
      • Download: Deve permitir o download do arquivo.

7. Listagem Estado do Equipamento:
O Checklist deve ser renderizado com base no que for cadastrado do tipo de equipamento, mais detalhes Aqui PROC001 - Cadastro de Tipo de Equipamento

Regras de Negócio:

1. Anexos de Conferência:
Deve ser validado até 10 arquivos anexados dentro de uma Ordem de Serviço e se não ultrapassam o tamanho de 5MB.

PROC005.1 - Adicionar Especificações.

Protótipo de Tela:

Descrição dos Campos:

Campo	Tipo	Tamanho	Obrig. ?	Máscara	Observações
Marca/Modelo	Texto	-	-	-
Número de Série	Texto	-	-	-
Recorrência do Equipamento	Texto	-	-	-
Última Garantia	Data	-	-	-
Campos A - Z	Texto	-	-	-
Fechar	Botão	-	-	-
Salvar	Botão	-	-	-

Regras de Interface:

1. Marca/Modelo:
Campo faz referencia ao campo "marca/modelo" atuais, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.

2 Número de Série:
Campo faz referencia ao campo "Número de Série" atual, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.

3 Recorrência do Equipamento:
Campo faz referencia ao campo "Recorrência do Equipamento" atual, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.

4 Última Garantia:
Campo faz referencia ao campo "Última Garantia" atual, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.

5 Campos A - Z:
Campos renderizado com base nas informações personalizadas do tipo de equipamento, mais informações Aqui PROC001 - Cadastro de Tipo de Equipamento. Também deve ser renderizado o campo chave do produto como um dos campos A - Z, considerar como o primeiro campo devido a ser o único obrigatório.

Regras de Negócio:

1. Os campos [Marca/Modelo ; Número de Série ;  Recorrência do Equipamento ; Última Garantia ] são referente as Ordens de Serviço antigas, somente devendo ser mostrado no novo layout caso possuam conteúdo no campos referentes na base de dados.

2. Fechar:
Deve encerrar a tela sem salvar quaisquer informações.

3. Salvar:
Deve salvar as informações na base de dados. Caso sejam novas informações, deve ser salvo um novo registro na base de dados. Caso as informações já estejam salvas, devem ser atualizadas na base de dados.

Questões Técnicas Gerais:

1. Geral:
As tabelas relacionadas a Ordem de Serviço na base de dados são:

• • ordermservico
  • ordemservicoitem

2. Produto e Serviço:
Deve ser criado uma coluna na base de dados para armazenar o percentual do desconto do produto inserido:

ALTER TABLE ordemservicoADD COLUMN descontoPorcento DECIMAL(19,2)

3. Equipamento:
Deve ser criada uma tabela intermediaria para armazenar o Path do arquivo anexado dentro do servidor:

CREATE TABLE orderservicoanexo
(
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  ordemId BIGINT NOT NULL,
  pathAnexo TEXT,
  FOREIGN KEY (ordemId) REFERENCES ordemservico(id)
);

4. Campos referentes aos campos antigos de especificações do equipamento:

SELECT marcaModelo, serie, dataGarantia FROM ordemservico

4.1 Os campos adicionais de equipamento a serem renderizados se encontram em tipoequipamento.campochave e tipoequipamento.adicionais. Ambos devem ser renderizados em tela.

5. Referencia para salvamento dos dados novos renderizados (Campos A-Z):

INSERT INTO gerencieaqui.equipamento (adicionais) VALUES ('[{"nome": "Número de Série","valor": "123456"}]');

5. Referencia para salvamento dos dados da checklist:

INSERT INTO gerencieaqui.ordemservico (checklist) VALUES ('[{ "etapa": "Veio fonte?" }]');

7. Segue o esquema de cores padrão a ser utilizado nos componentes:

GerencieAqui: 
Títulos dos Accordions: #626262
Label dos campos: #044572
Botões principais: #044572
Tooltip: #242424
Botão editar da listagem: #1974FC
Botão exclusão da listagem: #DB102B
Título da dialog: #242424
Placeholders: #50505080 (50%)
Label das abas: #626262
Label aba selecionada: #009997
Inputs e textos nos grids: #000000