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çãoCliente 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: #626262Label dos campos: #044572Botões principais: #044572Tooltip: #242424Botão editar da listagem: #1974FCBotão exclusão da listagem: #DB102BTítulo da dialog: #242424Placeholders: #50505080 (50%)Label das abas: #626262Label aba selecionada: #009997Inputs e textos nos grids: #000000 AplicativoEmpresarial: Títulos dos Accordions: #626262Label dos campos: #621FA4Botões principais: #621FA4Tooltip: #242424Botão editar da listagem: #1974FCBotão exclusão da listagem: #DB102BTítulo da dialog: #242424Placeholders: #50505080 (50%)Label das abas: #626262Label aba selecionada: #009997Inputs e textos nos grids: #000000