Fintech

Dashboard financeiro para acompanhar vendas, resumo consolidado e detalhes de cada venda com filtro por período, atalhos por mês e gráfico por status.

---

Preview do Projeto

---

Tecnologias Utilizadas

Tecnologia	Uso no projeto
React	Construção da interface com componentes e hooks
TypeScript	Tipagem compartilhada e contratos de dados
Vite	Ambiente de desenvolvimento e build
React Router DOM	Rotas e navegação entre páginas
Recharts	Visualização do gráfico de vendas
Fetch API	Consumo da API de vendas
CSS Custom Properties	Tokens visuais e consistência de estilo
Media Queries	Adaptação da interface para telas menores

---

Testes

Os testes cobrem os componentes que têm comportamento relevante:

• src/Components/Loading.test.tsx
• src/Components/DateInput.test.tsx
• src/Components/MesBtn.test.tsx
• src/Components/Meses.test.tsx
• src/Components/DataRange.test.tsx
• src/Components/VendaItem.test.tsx
• src/Components/Sidenav.test.tsx
• src/Components/Header.test.tsx
• src/Components/GraficoVendas.test.tsx

Como Rodar

Desenvolvimento

npm install
npm run dev

Build

npm run build

Testes

npm run test

Para executar a suíte uma única vez:

npm run test:run

Preview da build

npm run preview

---

Funcionalidades

• Resumo com total de vendas, recebido e processando.
• Lista de vendas com link para detalhe.
• Página de venda individual.
• Filtro por intervalo de datas.
• Atalhos por mês.
• Gráfico de vendas por status.
• Estados de carregamento durante a busca dos dados.

---

Rotas do Projeto

Rota	Descrição
/	Página de resumo com indicadores e gráfico.
/vendas	Lista de vendas carregadas pela API.
/vendas/:id	Detalhe de uma venda específica.

As rotas estão definidas em src/App.tsx e usam BrowserRouter com Routes.

---

Estrutura do Projeto

.
├── index.html
├── package.json
├── public/
├── src/
│   ├── Components/
│   ├── Contexts/
│   ├── Hooks/
│   ├── Pages/
│   ├── Types/
│   ├── Utils/
│   └── assets/
│       └── icons/
├── tsconfig.json
├── tsconfig.app.json
└── vite.config.ts

• public/ guarda os arquivos estáticos servidos diretamente pelo Vite, como o favicon.
• src/Components/ concentra os componentes reutilizáveis da interface.
• src/Contexts/ concentra o contexto global de dados e o intervalo de datas.
• src/Hooks/ reúne hooks reutilizáveis, como o fetch genérico.
• src/Pages/ contém as páginas roteadas.
• src/Types/ centraliza os tipos compartilhados.
• src/Utils/ traz utilitários pequenos, como a formatação de data.
• src/assets/ armazena o SVG principal e os ícones usados na navegação.

---

Licença e Autoria

Este projeto está sob a licença MIT.

Autor: ManoelReisDev

Repositório: fintech

---

Feito para acompanhar vendas com uma interface simples, dados compartilhados e visualização clara.