Merge branch 'main' into dev

Author: ricoamantino

README.md

@@ -50,7 +50,11 @@ pnpm lint
 pnpm test
 ```
 
-## Documentação do Repositório
+# Deploy
+
+<li><a href="https://meupj-api-student.delightfulwave-8b9abc5f.brazilsouth.azurecontainerapps.io/">meupj.azurecontainerapps.io</a></li>
+
+# Apresentação
 
 - [`src/README.md`](src/README.md): documentação técnica canônica do código atual
 - [`docs/`](docs): artefatos acadêmicos organizados por etapa

docs/04-Projeto de Interface.md

@@ -1,60 +1,271 @@
 # Projeto de Interface
 
-<span style="color:red">Pré-requisitos: <a href="02-Especificação do Projeto.md"> Documentação de Especificação</a></span>
+## Visão Geral
 
-Este documento apresenta a visão geral da interação do usuário com as principais telas do sistema nas versões web e mobile. A solução foi organizada para priorizar fluxos curtos, leitura rápida do estado do negócio e execução direta das ações mais frequentes.
+O projeto de interface foi desenvolvido com o objetivo de proporcionar uma experiência simples, intuitiva e eficiente para profissionais autônomos e pequenos prestadores de serviço, conforme identificado nas personas e histórias de usuário.
 
-As interfaces foram elaboradas de forma a atender os requisitos funcionais do sistema, especialmente autenticação, manutenção de clientes, catálogo, pedidos, lançamentos financeiros, emissão de documentos e contato rápido com clientes.
+As interfaces foram projetadas considerando:
+
+- Facilidade de uso (RNF-003)  
+- Rapidez na execução de tarefas  
+- Clareza na visualização das informações  
+- Compatibilidade entre desktop e dispositivos móveis (RNF-004)  
+
+A navegação do sistema foi organizada em módulos principais (Clientes, Catálogo, Pedidos e Financeiro), permitindo que o usuário acesse rapidamente as funcionalidades essenciais do sistema.
 
 ## Diagrama de Fluxo
 
-O fluxo principal da aplicação pode ser resumido da seguinte forma:
+O fluxo de interação do usuário foi estruturado de forma simples e linear, reduzindo a complexidade e facilitando o uso diário.
+
+### Fluxo principal do sistema
+
+    Login / Cadastro
+            ↓
+    Dashboard / Financeiro
+            ↓
+    ├── Clientes
+    │     ├── Listar clientes
+    │     └── Cadastrar / Editar cliente
+    │
+    ├── Catálogo
+    │     ├── Listar produtos/serviços
+    │     └── Cadastrar item
+    │
+    ├── Pedidos
+    │     ├── Criar pedido
+    │     ├── Editar pedido
+    │     └── Gerar documentos (recibo/orçamento/OS)
+    │
+    └── Financeiro
+          ├── Visualizar painel
+          └── Criar lançamento
 
-1. O usuário cria conta ou realiza login.
-2. Após autenticação, acessa o painel principal com visão resumida do financeiro.
-3. A partir da navegação principal, pode acessar clientes, catálogo, pedidos e configurações.
-4. Nos módulos operacionais, pode criar, editar, excluir e consultar registros.
-5. Em pedidos e lançamentos, pode emitir documentos em PDF conforme as regras do sistema.
-6. Em clientes, pode acionar rapidamente telefone e WhatsApp quando houver telefone válido.
+Esse fluxo permite que o usuário realize suas tarefas principais com poucos passos, atendendo especialmente:
 
-Na versão web, a navegação prioriza listas com ações contextuais por item, cabeçalhos fixos, filtros e visualização direta dos documentos. Na versão mobile, a navegação prioriza tabs, telas de detalhe e menus contextuais adaptados ao toque.
+- João (rapidez)
+- Carla (organização)
+- Marcos (visão compartilhada)
 
-> **Pendência registrada:** o diagrama visual desta seção deve ser atualizado para refletir os fluxos reais atuais de login, dashboard, clientes, catálogo, pedidos, documentos e ações rápidas de contato.
 
 ## Wireframes
 
-As principais interfaces do sistema implementado são:
+### 1. Autenticação (Login, Cadastro e Recuperação de Senha)
+
+#### Objetivo
+Permitir que o usuário acesse o sistema de forma segura e crie sua conta.
+
+#### Funcionalidades
+- Login com e-mail e senha  
+- Cadastro de novo usuário  
+- Recuperação de senha  
+
+#### Requisitos atendidos
+- RF-001  
+- RF-002  
+- RF-003  
+- RNF-001  
+- RNF-002  
+
+#### Decisões de design
+- Layout dividido com área visual e formulário  
+- Campos simples e diretos  
+- Botões de ação destacados  
+- Versão mobile otimizada para uso rápido  
+
+#### Relação com personas
+- João: acesso rápido  
+- Carla: experiência profissional  
+- Marcos: facilidade para múltiplos acessos  
+
+
+![Login e Cadastro](./img/login_cadastro.jpeg)
+
+### 2. Catálogo (Produtos e Serviços)
+
+#### Objetivo
+Gerenciar os itens oferecidos pelo usuário.
+
+#### Funcionalidades
+- Listagem em cards  
+- Filtro por tipo (produto/serviço)  
+- Cadastro e edição de itens  
+- Definição de preço e unidade  
+
+#### Requisitos atendidos
+- RF-012  
+- RF-013  
+- RF-014  
+- RF-015  
+
+#### Decisões de design
+- Uso de cards para melhor visualização  
+- Separação por abas (Todos, Produtos, Serviços)  
+- Destaque para preço  
+
+#### Diferencial
+- Campo de custo e margem para produtos  
+
+#### Relação com personas
+- João: visão rápida  
+- Carla: padronização  
+- Marcos: controle facilitado  
+
+---
+![Catalogo](./img/catalogo.jpeg)
+
+
+### 3. Financeiro
+
+#### Objetivo
+Apresentar a situação financeira do negócio de forma clara e centralizada.
+
+#### Funcionalidades
+- Painel com indicadores:
+  - Receita confirmada  
+  - Valores a receber  
+  - Valores em atraso  
+  - Resultado  
+- Lista de lançamentos  
+- Cadastro de receitas e custos  
+
+#### Requisitos atendidos
+- RF-016  
+- RF-017  
+- RF-018  
+
+#### Decisões de design
+- Uso de cores para status:
+  - Verde → confirmado  
+  - Azul → pendente  
+  - Vermelho → atraso  
+- Gráfico simplificado para análise rápida  
+- Lista com informações resumidas  
+
+#### Relação com personas
+- João: controle básico  
+- Carla: visão estratégica  
+- Marcos: acompanhamento financeiro  
+
+### 4. Lista de Clientes
+![Lista de Clientes](./img/lista_clientes.jpeg)
+
+#### Objetivo
+Permitir a visualização, organização e gerenciamento dos clientes cadastrados no sistema.
+
+#### Descrição da Interface
+A tela apresenta uma listagem clara e organizada dos clientes, permitindo acesso rápido às informações principais. Cada cliente é exibido com dados resumidos, facilitando a identificação e seleção.
+
+Além da listagem, a interface permite o acesso ao cadastro completo do cliente, estruturado em seções bem definidas para melhor organização das informações.
+
+#### Funcionalidades
+- Visualização da lista de clientes cadastrados  
+- Busca de clientes por nome  
+- Identificação do tipo de cliente (Pessoa Física ou Jurídica)  
+- Acesso ao cadastro completo do cliente  
+- Criação, edição e exclusão de clientes  
+
+#### Estrutura do Cadastro de Cliente
+O formulário de cadastro foi organizado em blocos para facilitar o preenchimento e leitura:
+
+- **Identificação:** nome, CPF ou CNPJ  
+- **Contato:** telefone e e-mail  
+- **Endereço:** rua, número, bairro, cidade, estado e CEP  
+- **Anotações:** campo livre para observações internas  
+
+#### Decisões de Design
+- Separação das informações por seções → melhora a usabilidade  
+- Lista simples → facilita leitura rápida  
+- Campos objetivos → reduz tempo de preenchimento  
+
+#### Requisitos atendidos
+- RF-004  
+- RF-005  
+- RF-006  
+- RF-007  
+
+---
+
+### 5. Perfil do Usuário ("Meu Perfil")
+
+![Perfil](./img/perfil.jpeg)
+
+#### Objetivo
+Permitir que o usuário gerencie seus dados pessoais e as informações do seu negócio, utilizadas nos documentos e na personalização do sistema.
+
+#### Descrição da Interface
+A tela de perfil centraliza todas as informações do usuário e do seu negócio, permitindo edição completa dos dados. A organização em seções facilita a atualização e manutenção das informações.
+
+#### Funcionalidades
+- Visualização e edição dos dados pessoais  
+- Atualização das informações do negócio  
+- Upload e alteração do logotipo  
+- Alteração de senha  
+- Personalização de dados exibidos nos documentos  
+
+#### Estrutura das Informações
+
+O perfil foi dividido em blocos para melhor organização:
+
+- **Dados do usuário:** nome e informações de acesso  
+- **Dados do negócio:** nome do negócio e razão social  
+- **Documento:** CPF ou CNPJ  
+- **Contato:** telefone e e-mail comercial  
+- **Logotipo:** imagem utilizada nos documentos  
+- **Rodapé padrão:** texto exibido em propostas, recibos e ordens de serviço  
+- **Anotações:** campo livre para informações adicionais  
+
+#### Decisões de Design
+- Centralização de todas as configurações em uma única tela  
+- Organização por seções → facilita edição  
+- Campos editáveis de forma direta → maior agilidade  
+- Personalização visual (logotipo e rodapé) → reforça profissionalismo  
+
+#### Requisitos atendidos
+- RF-001  
+- RF-002  
+- RNF-003  
+
+
+## Versão Mobile
+
+A versão mobile foi projetada com foco em praticidade e uso rápido.
+
+#### Características
+- Layout vertical  
+- Botão flutuante (+) para ações principais  
+- Navegação simplificada  
+- Elementos adaptados para toque  
+
+#### Requisitos atendidos
+- RNF-004  
+
+---
+
+## Justificativa de Design
+
+O projeto foi baseado em três pilares principais:
 
-### Interface Web
+### Simplicidade
+- Interfaces limpas  
+- Redução de elementos desnecessários  
+- Navegação direta  
 
-- **Login e cadastro:** entrada do sistema com autenticação por sessão.
-- **Dashboard financeiro:** exibe KPIs, gráfico resumido, filtros por período e listagem recente de lançamentos.
-- **Clientes:** listagem paginada com busca, filtro por tipo, ações de editar, excluir, ligar e abrir WhatsApp.
-- **Catálogo:** listagem e manutenção de produtos e serviços com foco em reaproveitamento nos pedidos.
-- **Pedidos:** lista por status, busca, criação, edição, exclusão e emissão de orçamento/ordem de serviço.
-- **Documentos:** páginas de preview para orçamento, ordem de serviço e recibo, com abertura e download do PDF.
-- **Configurações:** edição do perfil do usuário e do negócio.
+### Eficiência
+- Ações principais sempre visíveis  
+- Redução de cliques  
+- Fluxo otimizado  
 
-### Interface Mobile
+### Clareza
+- Uso de cores para indicar status  
+- Organização por módulos  
+- Hierarquia visual bem definida  
 
-- **Autenticação:** login e cadastro com guarda de sessão.
-- **Dashboard:** resumo financeiro, listagem recente e emissão contextual de recibo.
-- **Clientes:** listagem com navegação para detalhe, cadastro, edição, exclusão e ações rápidas de contato.
-- **Catálogo:** listagem, cadastro e edição de itens.
-- **Pedidos:** listagem, criação, edição, detalhe e emissão de documentos.
-- **Configurações:** edição dos dados do usuário e do negócio.
+---
 
-### Decisões de Interface
+## Conclusão
 
-- priorização de ações operacionais na própria lista, reduzindo a dependência de telas intermediárias;
-- uso de feedback de loading, erro e confirmação nas operações críticas;
-- separação visual clara entre ações administrativas e ações operacionais;
-- adaptação dos fluxos de documento por plataforma: preview web e abertura/compartilhamento externo no mobile nativo.
+As interfaces desenvolvidas atendem às necessidades do público-alvo ao oferecer uma experiência simples, organizada e eficiente.
 
-> **Pendência registrada:** os wireframes e capturas desta seção devem ser substituídos por representações reais das telas implementadas. Os exemplos visuais antigos não devem ser tratados como fonte de verdade da interface atual.
+A aplicação permite que profissionais autônomos e pequenos empreendedores tenham maior controle sobre suas atividades comerciais e financeiras, contribuindo para uma gestão mais profissional e estruturada.
 
-> **Links Úteis**:
->
-> - [Protótipos vs Wireframes](https://www.nngroup.com/videos/prototypes-vs-wireframes-ux-projects/)
-> - [Ferramentas de Wireframes](https://rockcontent.com/blog/wireframes/)
-> - [Figma](https://www.figma.com/)
+Além disso, a adaptação para dispositivos móveis garante acessibilidade e uso contínuo no dia a dia, reforçando a proposta de praticidade da solução.