Um sistema moderno de ponto de venda (PDV) desenvolvido com React, TypeScript e Styled Components, projetado para gerenciar vendas, produtos e pagamentos em estabelecimentos comerciais.
O PDV React é uma aplicação web responsiva que oferece uma interface intuitiva para operações de ponto de venda, incluindo gestão de produtos, controle de estoque, processamento de pagamentos e relatórios de vendas.
Interface de login moderna e segura com controle de acesso.
| Desktop | Mobile |
|---|---|
 |
 |
Resumo financeiro em tempo real e PDV ágil.
| Desktop | Mobile |
|---|---|
 |
 |
Controle total do catálogo e níveis de estoque.
| Desktop | Mobile |
|---|---|
 |
 |
Relatórios detalhados de transações e métodos de pagamento.
| Desktop | Mobile |
|---|---|
 |
 |
Informações sobre a versão e equipe.
| Desktop | Mobile |
|---|---|
 |
 |
- Resumo Financeiro: Visualização em tempo real de valores em dinheiro, cartão e total do caixa
- Status do Caixa: Indicador visual de caixa aberto/fechado com data atual
- Busca de Produtos: Consulta rápida de materiais com filtering em tempo real
- Categorias em Carrossel: Navegação visual por categorias de produtos
- Carrinho de Compras: Adicionar/remover produtos, calcular totais, atualizar quantidades
- Processamento de Pagamentos: Múltiplos métodos (dinheiro, cartão, pix) com cálculo de troco
- Finalização de Venda: Geração de recibos e histórico completo
- Busca por Código: Localização rápida de produtos por código
- Catálogo Completo: Lista com imagens, nomes e preços formatados
- Interface Administrativa: Controle total do catálogo de produtos
- Busca e Filtragem: Busca instantânea por nome do produto
- Histórico de Vendas: Relatórios detalhados com filtros por período
- Estatísticas: Totais por método de pagamento e produtos mais vendidos
- Exportação: Exportar dados para CSV e backup completo
- Impressão: Geração de relatórios em PDF
- Sistema de Login: Interface moderna e segura com controle de acesso
- Proteção de Rotas: Apenas usuários autenticados podem acessar o sistema
- Design Responsivo: Adaptável a desktop e mobile
- Componentes Reutilizáveis: Arquitetura modular e bem estruturada
- Ícones Modernos: Interface visual consistente com Lucide React
- Estilização Avançada: CSS-in-JS com Styled Components e TailwindCSS
- React 18.2.0 - Biblioteca principal de UI
- TypeScript 5.3.0 - Tipagem estática
- React Router DOM 5.3.4 - Navegação client-side
- Styled Components 6.1.8 - Estilização CSS-in-JS
- TailwindCSS 4.2.2 - Framework de CSS utilitário
- Lucide React 0.312.0 - Biblioteca de ícones
- Pure React Carousel 1.30.1 - Componente de carrossel
- Polished 4.2.2 - Utilitários para CSS
- Styled Media Query 2.1.2 - Media queries simplificadas
- Axios 1.6.7 - Cliente HTTP
- JSON Server - API REST fake para desenvolvimento
- Porta da API: 3333
- Vite 5.1.0 - Build tool e dev server
- Vitest 1.0.0 - Framework de testes
- Playwright 1.59.1 - Testes E2E
- ESLint 8.57.0 - Linting
- TypeScript ESLint - Linting para TypeScript
- PostCSS 8.5.8 - Processamento de CSS
- Autoprefixer 10.4.27 - Prefixos CSS automáticos
src/
├── assets/
│ └── images/ # Imagens estáticas (ícones de categorias)
├── components/
│ ├── ErrorBoundary/ # Tratamento de erros
│ ├── Layout/ # Layout principal da aplicação
│ ├── MenuBar/ # Barra de menu superior
│ ├── ProductList/ # Lista de produtos
│ ├── Profile/ # Componente de perfil
│ └── Sidebar/ # Menu lateral
├── pages/
│ ├── About/ # Página sobre
│ ├── Dashboard/ # Dashboard principal
│ └── Product/ # Página de produtos
├── routes/
│ └── index.tsx # Configuração de rotas
├── services/
│ ├── api.ts # Configuração do Axios
│ ├── CacheService.ts # Serviço de cache
│ └── ProductService.ts # Serviço de produtos
├── styles/
│ ├── carrousel.css # Estilos do carrossel
│ └── global.ts # Estilos globais
├── utils/
│ └── formatPrice.ts # Utilitário de formatação de preços
├── viewmodels/
│ ├── BaseViewModel.ts # ViewModel base
│ ├── CartViewModel.ts # ViewModel do carrinho
│ ├── DashboardViewModel.ts # ViewModel do dashboard
│ ├── MenuBarViewModel.ts # ViewModel do menu
│ └── SidebarViewModel.ts # ViewModel da sidebar
├── hooks/
│ ├── index.ts # Exportação de hooks
│ ├── useAsync.ts # Hook para operações assíncronas
│ ├── useDebounce.ts # Hook para debounce
│ └── useLocalStorage.ts # Hook para localStorage
└── tests/
└── DashboardViewModel.test.ts # Testes do ViewModel
interface Product {
id: number;
title: string;
price: number;
priceFormatted?: string;
image: string;
}interface Stock {
id: number;
amount: number;
}interface DashboardState {
products: Product[];
isLoading: boolean;
error: string | null;
searchTerm: string;
cashAmount: number;
cardAmount: number;
totalAmount: number;
}- Node.js (versão 16 ou superior)
- npm ou yarn
- Clone o repositório
git clone <repository-url>
cd pdv-react- Instale as dependências
npm install
# ou
yarn install- Inicie a API de desenvolvimento
npm run fakeapiA API estará disponível em http://localhost:3333
- Inicie a aplicação
npm run devA aplicação estará disponível em http://localhost:5173
npm run dev- Inicia o servidor de desenvolvimentonpm run build- Build para produçãonpm run preview- Preview do build de produçãonpm run test- Executa os testes unitáriosnpm run fakeapi- Inicia a API fake com JSON Server
O projeto utiliza Vitest como framework de testes unitários e Playwright para testes E2E. Os testes estão localizados na pasta src/tests/.
# Testes unitários
npm run test
# Testes E2E (requiere setup do Playwright)
npx playwright test- Dashboard com resumo financeiro
- Listagem de produtos
- Busca e filtragem de produtos
- Carrossel de categorias
- Interface responsiva
- API fake para desenvolvimento
- Arquitetura com ViewModels
- Componentes reutilizáveis (Layout, MenuBar, Sidebar, ErrorBoundary)
- Sistema de rotas com React Router
- Testes automatizados com Vitest
- Página de gestão de produtos
- Página sobre (About)
- Carrinho de Compras
- Adicionar/remover produtos do carrinho
- Calcular totais
- Visualização do carrinho
- Atualizar quantidades no carrinho
- Limpar carrinho
- Sidebar com resumo da venda
- Busca por código de produto
- Gestão de Estoque
- Controle automático de estoque
- Alertas de baixo estoque
- Atualização de quantidade
- Interface de Pagamentos
- Botão de finalização de venda
- Botão de cancelamento de venda
- Cálculo automático de totais
- Processamento de Pagamentos
- Simulação de pagamentos
- Múltiplos métodos (dinheiro, cartão, pix)
- Calculadora de troco
- Finalização de Venda
- Geração de recibos
- Histórico de vendas
- Fechamento de caixa
- Relatórios de Vendas
- Vendas por período
- Produtos mais vendidos
- Relatório financeiro
- Exportação de Dados
- Exportar para CSV
- Backup de dados
- Exportar para PDF (simulado via impressão)
- Sistema de Usuários
- Login/logout
- Perfis de usuário
- Controle de permissões
- Segurança
- JWT tokens (simulação)
- Proteção de rotas
- Gestão de Usuários
- CRUD completo de usuários
- Permissões granulares por funcionalidade
- Interface administrativa para gestão
- Multi-caixa
- Múltiplos terminais
- Sincronização em tempo real
- Integrações
- API externa de produtos
- Integração com sistemas de pagamento
- Impressora fiscal (simulada)
- Aplicativo Mobile
- Versão para mobile
- Modo offline
- Sincronização automática
A aplicação está configurada para usar a API local em http://localhost:3333.
Este projeto é de uso privado e proprietário. Todos os direitos reservados.
PDV React Sistema privado de ponto de venda desenvolvido para uso comercial.