Front-End - Consulta de Créditos

Este projeto Angular permite a consulta de créditos por número da NFS-e ou número do crédito, utilizando integração com uma API RESTful. O layout é totalmente responsivo, com estilo visual utilizando Tailwind CSS, adaptado para celular, tablet e desktop.

🔧 Tecnologias Utilizadas

Angular 19+ com Standalone Components
Tailwind CSS
HttpClient para integração com a API
Arquitetura modular e componentizada

📁 Estrutura de Pastas

src/
└── app/
    ├── consulta/
    │   ├── consulta.component.ts         # Componente principal
    │   ├── consulta.component.html       # Layout e estrutura geral
    │   ├── consulta.component.css        # Estilizações adicionais (opcional)
    │
    │   ├── consulta-form/
    │   │   └── consulta-form.component.ts/html # Inputs e lógica de formulário
    │
    │   ├── consulta-tabela/
    │   │   └── consulta-tabela.component.ts/html # Tabela responsiva (desktop)
    │
    │   ├── consulta-card/
    │   │   └── consulta-card.component.ts/html   # Cartões para mobile
    │
    │   ├── consulta-status/
    │       └── consulta-status.component.ts/html # Mensagens de status (carregando/erro)

🧩 Explicação dos Componentes

Componente	Função
`ConsultaComponent`	Container principal que orquestra todos os subcomponentes
`ConsultaFormComponent`	Responsável pelos inputs, controle de desabilitação e botão "Consultar"
`ConsultaTabelaComponent`	Exibe resultados como tabela para telas maiores (≥ `sm`)
`ConsultaCardComponent`	Exibe os mesmos resultados em formato de cartão (ideal para mobile)
`ConsultaStatusComponent`	Mostra mensagens de carregamento ou "nenhum resultado encontrado"

🚀 Como Rodar

Instale dependências:
```
npm install
```
Rode o projeto:
```
ng serve
```
Acesse no navegador: http://localhost:4200

🔄 Melhorias Futuras

✅ Paginação

Objetivo: limitar os resultados por página e evitar longas listas.
Solução:
- Implementar paginação no backend (?page=1&size=10)
- Exibir controles com << < 1 2 3 > >>
- Armazenar o estado da página atual no ConsultaComponent.

🔽 Ordenação da Tabela

Objetivo: permitir ordenação por coluna (ex: valor, data, número).
Solução:
- Adicionar <th (click)="sortBy('coluna')"> nas colunas da tabela.
- Alternar entre ASC e DESC no estado do componente.
- Se possível, implementar ordenação também no backend para performance.

✨ UX Extra

Exibir ícone de carregamento (spinner) ao buscar.
Mostrar tooltip ao passar o mouse em inputs desabilitados.
Realçar resultado mais recente ou com maior valor.

🐳 Como rodar com Docker

IMPORTANTE: Para testar com o backend, primeiro suba o docker-compose do backend e depois siga os passos abaixo para funcionar a integração com o back.

docker build -t angular-front .
docker compose up -d --build

gesuvs/frontend-infuse-tecnologia

README