🔧 Sistema completo de gestão para oficinas mecânicas desenvolvido com Vue.js 3, Tailwind CSS, TypeScript e Vite.
Sistema web responsivo para gestão completa de oficinas mecânicas, incluindo controle de clientes, veículos, serviços, peças, ordens de serviço e dashboard com relatórios em tempo real. O projeto utiliza IndexedDB para armazenamento local dos dados.
Este projeto foi desenvolvido com o auxílio de ferramentas de Inteligência Artificial, incluindo GitHub Copilot e outros assistentes de IA, para demonstrar as melhores práticas de desenvolvimento moderno e acelerar o processo de criação.
- Vue.js 3 - Framework JavaScript progressivo
- TypeScript - Superset do JavaScript com tipagem estática
- Tailwind CSS - Framework CSS utilitário
- DaisyUI - Componentes para Tailwind CSS
- Vite - Build tool e dev server rápido
- Composition API - API moderna do Vue 3 com
<script setup> - IndexedDB - Banco de dados local do navegador
- VueUse - Coleção de utilitários para Vue 3
- Node.js (versão 16 ou superior)
- npm ou yarn
-
Clone o repositório
git clone <url-do-repositorio> cd oficina-vue-tailwind
-
Instale as dependências
npm install
-
Execute o projeto em modo de desenvolvimento
npm run dev
-
Acesse no navegador
http://localhost:5173
npm run dev- Inicia o servidor de desenvolvimento (localhost:5173)npm run build- Gera a build de produçãonpm run preview- Visualiza a build de produção localmentenpm run type-check- Verifica os tipos TypeScript
- Composition API com
<script setup> - TypeScript para tipagem forte
- Composables para lógica reutilizável
- Reactive state com Vue 3
- Component communication via eventos
- IndexedDB para persistência local
- Transações para operações complexas
- Validação de dados em tempo real
- Backup/Restore em formato JSON
- Lazy loading de componentes
- Computed properties para otimização
- Virtual scrolling para listas grandes
- Debounced search em filtros
- Loading states em operações async
- Error handling com mensagens claras
- Confirmation dialogs para ações críticas
- Responsive design mobile-first
oficina-vue-tailwind/
├── public/ # Arquivos estáticos
│ ├── backup-oficina-demo.json # Dados de exemplo
│ └── vite.svg
├── src/
│ ├── components/ # Componentes Vue reutilizáveis
│ │ ├── ClientesList.vue # Gestão de clientes
│ │ ├── VeiculosList.vue # Gestão de veículos
│ │ ├── ServicosList.vue # Gestão de serviços
│ │ ├── PecasList.vue # Gestão de peças/estoque
│ │ ├── OrdemServicoList.vue # Gestão de ordens de serviço
│ │ └── Dashboard.vue # Dashboard com relatórios
│ ├── composables/ # Composables Vue
│ │ └── useSorting.ts # Hook para ordenação de dados
│ ├── services/ # Camada de dados e serviços
│ │ ├── db.ts # Gerenciamento IndexedDB
│ │ ├── types.ts # Tipos TypeScript
│ │ ├── validators.ts # Validadores de dados
│ │ └── *Service.ts # Serviços específicos por entidade
│ ├── assets/ # Recursos (imagens, estilos)
│ ├── App.vue # Componente raiz
│ └── main.ts # Ponto de entrada da aplicação
├── index.html # Template HTML principal
└── package.json # Dependências e scripts
- Visão geral com estatísticas em tempo real
- Gráficos de ordens de serviço por status
- Alertas de estoque baixo
- Relatório de faturamento
- Ordens de serviço recentes
- Exportação e importação de dados
- Reset do banco de dados
- Cadastro, edição e exclusão de clientes
- Validação de dados (nome, email, telefone, CPF)
- Sistema de busca e filtros
- Ordenação por colunas
- Interface responsiva
- Cadastro de veículos vinculados aos clientes
- Controle de placa, modelo e ano
- Filtros por cliente, placa, modelo
- Integração com ordens de serviço
- Validação de dados
- Cadastro de tipos de serviços
- Controle de valores e status
- Histórico de serviços por veículo
- Sistema de busca e filtros
- Edição inline de dados
- Controle completo de estoque
- Alertas de estoque baixo/crítico
- Preços de compra e venda
- Status automático por quantidade
- Integração com ordens de serviço
- Validação de quantidades
- Criação e gestão completa de O.S.
- Vinculação de serviços e peças
- Controle de status (aberta, em andamento, concluída, cancelada)
- Cálculo automático de valores
- Baixa automática no estoque
- Impressão de O.S.
- Compartilhamento via WhatsApp
- Filtros avançados por data, cliente, status
- Numeração automática
- Armazenamento local com IndexedDB
- Backup e restauração de dados
- Dados de demonstração inclusos
- Sistema de validação completo
- Design responsivo e moderno
- Tailwind CSS para estilização
- Componentes reutilizáveis
- Feedback visual (loading, mensagens)
- Modais para formulários
- Ordenação de tabelas
- Sistema de filtros
- Vue.js 3 Documentation
- Tailwind CSS Documentation
- TypeScript Handbook
- Vite Guide
- IndexedDB Guide
- Vue Composition API
Sistema completo para oficinas mecânicas com todas as funcionalidades necessárias para o dia a dia, desde o cadastro de clientes até a emissão de ordens de serviço.
Todos os dados são armazenados localmente no navegador usando IndexedDB, garantindo privacidade e funcionamento offline.
Design responsivo e moderno usando Tailwind CSS, com componentes bem estruturados e experiência de usuário otimizada.
Código totalmente tipado em TypeScript, garantindo maior segurança e produtividade no desenvolvimento.
- Cadastre clientes na aba correspondente
- Adicione veículos vinculados aos clientes
- Configure serviços e peças no estoque
- Crie ordens de serviço combinando serviços e peças
- Acompanhe tudo no dashboard com relatórios em tempo real
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
⭐ Se este projeto te ajudou, considere dar uma estrela!