377 lines
10 KiB
Markdown
377 lines
10 KiB
Markdown
|
# 🚀 Ferramenta de Gestão de Projetos
|
||
|
|
|
||
|
|
Uma aplicação completa para gerenciamento de projetos com sistema de temporizador, kanban board, organizações e controle de tempo gasto em tarefas.
|
||
|
|
|
||
|
|
## 📋 Índice
|
||
|
|
|
||
|
|
- [Funcionalidades](#-funcionalidades)
|
||
|
|
- [Tecnologias Utilizadas](#-tecnologias-utilizadas)
|
||
|
|
- [Pré-requisitos](#-pré-requisitos)
|
||
|
|
- [Instalação](#-instalação)
|
||
|
|
- [Configuração](#-configuração)
|
||
|
|
- [Como Usar](#-como-usar)
|
||
|
|
- [Estrutura do Projeto](#-estrutura-do-projeto)
|
||
|
|
- [API Endpoints](#-api-endpoints)
|
||
|
|
- [Deploy](#-deploy)
|
||
|
|
|
||
|
|
## ✨ Funcionalidades
|
||
|
|
|
||
|
|
### 🔐 **Sistema de Autenticação**
|
||
|
|
|
||
|
|
- Login via GitHub OAuth
|
||
|
|
- Sessões persistentes
|
||
|
|
- Controle de acesso baseado em autenticação
|
||
|
|
- Logout seguro
|
||
|
|
|
||
|
|
### 🏢 **Gestão de Organizações**
|
||
|
|
|
||
|
|
- Criar e gerenciar organizações
|
||
|
|
- Adicionar/remover membros
|
||
|
|
- Controle de permissões (Owner, Admin, Member)
|
||
|
|
- Seleção de organização ativa
|
||
|
|
- Persistência da organização selecionada
|
||
|
|
|
||
|
|
### 📊 **Dashboard Principal**
|
||
|
|
|
||
|
|
- Visão geral de projetos ativos
|
||
|
|
- Estatísticas em tempo real:
|
||
|
|
- Projetos ativos
|
||
|
|
- Cards ativos
|
||
|
|
- Cards concluídos
|
||
|
|
- Horas estimadas vs. horas produzidas
|
||
|
|
- Filtros por status e busca por nome
|
||
|
|
- Indicadores visuais de progresso
|
||
|
|
|
||
|
|
### 📋 **Gestão de Projetos**
|
||
|
|
|
||
|
|
- Criar novos projetos
|
||
|
|
- Definir datas de início e fim
|
||
|
|
- Configurar URLs de repositório
|
||
|
|
- Adicionar membros aos projetos
|
||
|
|
- Editar informações do projeto
|
||
|
|
- Visualizar estatísticas detalhadas
|
||
|
|
|
||
|
|
### 🎯 **Sistema Kanban**
|
||
|
|
|
||
|
|
- **5 Status**: A fazer, Em progresso, Em revisão, Testando, Concluído
|
||
|
|
- **Drag & Drop**: Arrastar cards entre colunas
|
||
|
|
- **Cores por Status**: Identificação visual rápida
|
||
|
|
- **Ordenação**: Reorganizar cards dentro das colunas
|
||
|
|
- **Criação de Cards**: Modal com campos essenciais
|
||
|
|
- **Edição de Cards**: Interface completa para modificação
|
||
|
|
|
||
|
|
### ⏱️ **Sistema de Temporizador**
|
||
|
|
|
||
|
|
- **Controle Único**: Apenas um card ativo por vez
|
||
|
|
- **Temporizador Global**: Exibição centralizada no header
|
||
|
|
- **Controles**: Play, Pause, Stop
|
||
|
|
- **Persistência**: Tempo salvo automaticamente no banco
|
||
|
|
- **Indicadores Visuais**: Card ativo destacado
|
||
|
|
- **Notificações**: Feedback ao finalizar atividades
|
||
|
|
- **Histórico**: Visualização de tempo gasto por card
|
||
|
|
|
||
|
|
### 📝 **Gestão de Cards**
|
||
|
|
|
||
|
|
- **Campos Obrigatórios**: Nome, descrição, status, horas estimadas
|
||
|
|
- **Adição Manual de Tempo**: Inserir tempo gasto manualmente
|
||
|
|
- **Histórico de Tempo**: Visualizar todos os registros de tempo
|
||
|
|
- **Edição Completa**: Modificar todos os campos
|
||
|
|
- **Validações**: Controle de dados obrigatórios
|
||
|
|
|
||
|
|
### 👥 **Gestão de Membros**
|
||
|
|
|
||
|
|
- Adicionar usuários aos projetos
|
||
|
|
- Visualizar membros com avatares
|
||
|
|
- Controle de permissões por projeto
|
||
|
|
- Integração com sistema de organizações
|
||
|
|
|
||
|
|
### 📈 **Estatísticas e Relatórios**
|
||
|
|
|
||
|
|
- Tempo total gasto por projeto
|
||
|
|
- Comparação entre horas estimadas e reais
|
||
|
|
- Indicadores visuais de progresso
|
||
|
|
- Estatísticas por organização
|
||
|
|
|
||
|
|
## 🛠️ Tecnologias Utilizadas
|
||
|
|
|
||
|
|
### **Frontend**
|
||
|
|
|
||
|
|
- **Next.js 15.4.1** - Framework React
|
||
|
|
- **React 19.1.0** - Biblioteca de interface
|
||
|
|
- **TypeScript** - Tipagem estática
|
||
|
|
- **Tailwind CSS** - Framework de estilização
|
||
|
|
- **Radix UI** - Componentes acessíveis
|
||
|
|
- **Lucide React** - Ícones
|
||
|
|
- **Sonner** - Notificações
|
||
|
|
|
||
|
|
### **Backend**
|
||
|
|
|
||
|
|
- **Next.js API Routes** - API REST
|
||
|
|
- **Better Auth** - Autenticação
|
||
|
|
- **Drizzle ORM** - ORM para banco de dados
|
||
|
|
- **PostgreSQL** - Banco de dados principal
|
||
|
|
|
||
|
|
### **Banco de Dados**
|
||
|
|
|
||
|
|
- **Neon Database** - PostgreSQL serverless
|
||
|
|
- **Drizzle Kit** - Migrações e schema
|
||
|
|
|
||
|
|
### **Ferramentas**
|
||
|
|
|
||
|
|
- **ESLint** - Linting
|
||
|
|
- **Prettier** - Formatação de código
|
||
|
|
- **Git** - Controle de versão
|
||
|
|
|
||
|
|
## 📋 Pré-requisitos
|
||
|
|
|
||
|
|
- **Node.js** 18+
|
||
|
|
- **npm** ou **yarn**
|
||
|
|
- **PostgreSQL** (ou Neon Database)
|
||
|
|
- **Conta GitHub** (para OAuth)
|
||
|
|
|
||
|
|
## 🚀 Instalação
|
||
|
|
|
||
|
|
1. **Clone o repositório**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
git clone <url-do-repositorio>
|
||
|
|
cd ferramenta-projeto
|
||
|
|
```
|
||
|
|
|
||
|
|
2. **Instale as dependências**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
3. **Configure as variáveis de ambiente**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cp .env.example .env.local
|
||
|
|
```
|
||
|
|
|
||
|
|
4. **Configure o banco de dados**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run db:generate
|
||
|
|
npm run db:push
|
||
|
|
```
|
||
|
|
|
||
|
|
5. **Inicie o servidor de desenvolvimento**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
## ⚙️ Configuração
|
||
|
|
|
||
|
|
### Variáveis de Ambiente
|
||
|
|
|
||
|
|
Crie um arquivo `.env.local` com as seguintes variáveis:
|
||
|
|
|
||
|
|
```env
|
||
|
|
# Database
|
||
|
|
DATABASE_URL="postgresql://user:password@host:port/database"
|
||
|
|
|
||
|
|
# GitHub OAuth
|
||
|
|
GITHUB_CLIENT_ID="seu_github_client_id"
|
||
|
|
GITHUB_CLIENT_SECRET="seu_github_client_secret"
|
||
|
|
|
||
|
|
# Auth
|
||
|
|
BETTER_AUTH_URL="http://localhost:3000"
|
||
|
|
NEXT_PUBLIC_API_URL="http://localhost:3000"
|
||
|
|
|
||
|
|
# CORS (opcional)
|
||
|
|
NEXT_PUBLIC_CORS_ORIGIN="http://localhost:3000"
|
||
|
|
```
|
||
|
|
|
||
|
|
### Configuração do GitHub OAuth
|
||
|
|
|
||
|
|
1. Acesse [GitHub Developer Settings](https://github.com/settings/developers)
|
||
|
|
2. Crie uma nova OAuth App
|
||
|
|
3. Configure:
|
||
|
|
- **Homepage URL**: `http://localhost:3000`
|
||
|
|
- **Authorization callback URL**: `http://localhost:3000/api/auth/callback/github`
|
||
|
|
4. Copie o Client ID e Client Secret para o `.env.local`
|
||
|
|
|
||
|
|
## 📖 Como Usar
|
||
|
|
|
||
|
|
### 1. **Primeiro Acesso**
|
||
|
|
|
||
|
|
1. Acesse `http://localhost:3000`
|
||
|
|
2. Clique em "Entrar com GitHub"
|
||
|
|
3. Autorize o acesso à sua conta GitHub
|
||
|
|
4. Você será redirecionado para o dashboard
|
||
|
|
|
||
|
|
### 2. **Criar Organização**
|
||
|
|
|
||
|
|
1. No dashboard, clique em "Organizações"
|
||
|
|
2. Clique em "Nova Organização"
|
||
|
|
3. Preencha nome e descrição
|
||
|
|
4. Clique em "Criar"
|
||
|
|
|
||
|
|
### 3. **Criar Projeto**
|
||
|
|
|
||
|
|
1. Selecione uma organização
|
||
|
|
2. Clique em "Novo Projeto"
|
||
|
|
3. Preencha os dados do projeto
|
||
|
|
4. Clique em "Criar"
|
||
|
|
|
||
|
|
### 4. **Gerenciar Cards**
|
||
|
|
|
||
|
|
1. Acesse um projeto
|
||
|
|
2. Clique em "Novo Card" para criar
|
||
|
|
3. Preencha nome, descrição, status e horas estimadas
|
||
|
|
4. Use drag & drop para mover cards entre colunas
|
||
|
|
|
||
|
|
### 5. **Usar o Temporizador**
|
||
|
|
|
||
|
|
1. Clique no botão ▶️ em qualquer card
|
||
|
|
2. O temporizador aparecerá no header
|
||
|
|
3. Use ⏸️ para pausar e ▶️ para retomar
|
||
|
|
4. Use ⏹️ para finalizar e salvar o tempo
|
||
|
|
|
||
|
|
### 6. **Editar Cards**
|
||
|
|
|
||
|
|
1. Clique em qualquer card para editar
|
||
|
|
2. Modifique os campos necessários
|
||
|
|
3. Adicione tempo manualmente se necessário
|
||
|
|
4. Visualize o histórico de tempo na aba "Tempo"
|
||
|
|
|
||
|
|
## 📁 Estrutura do Projeto
|
||
|
|
|
||
|
|
```
|
||
|
|
src/
|
||
|
|
├── app/ # App Router (Next.js 13+)
|
||
|
|
│ ├── (controle)/ # Rotas protegidas
|
||
|
|
│ │ ├── dashboard/ # Dashboard principal
|
||
|
|
│ │ ├── organizations/ # Gestão de organizações
|
||
|
|
│ │ └── project/[id]/ # Página do projeto
|
||
|
|
│ ├── api/ # API Routes
|
||
|
|
│ │ ├── auth/ # Autenticação
|
||
|
|
│ │ ├── createCard/ # Criar cards
|
||
|
|
│ │ ├── getProject/ # Buscar projetos
|
||
|
|
│ │ ├── organizations/ # Gestão de organizações
|
||
|
|
│ │ ├── saveTimeSpent/ # Salvar tempo
|
||
|
|
│ │ ├── updateCard/ # Atualizar cards
|
||
|
|
│ │ └── users/ # Gestão de usuários
|
||
|
|
│ ├── login/ # Página de login
|
||
|
|
│ └── page.tsx # Página inicial
|
||
|
|
├── components/ # Componentes reutilizáveis
|
||
|
|
│ ├── ui/ # Componentes base (Radix UI)
|
||
|
|
│ └── *.tsx # Componentes customizados
|
||
|
|
├── context/ # Contextos React
|
||
|
|
│ ├── authContext.tsx # Contexto de autenticação
|
||
|
|
│ ├── organizationContext.tsx # Contexto de organizações
|
||
|
|
│ └── timerContext.tsx # Contexto do temporizador
|
||
|
|
├── db/ # Configuração do banco
|
||
|
|
│ ├── index.ts # Conexão com banco
|
||
|
|
│ └── schema.ts # Schema do banco
|
||
|
|
├── lib/ # Utilitários e configurações
|
||
|
|
├── types/ # Tipos TypeScript
|
||
|
|
└── utils/ # Funções utilitárias
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🔌 API Endpoints
|
||
|
|
|
||
|
|
### **Autenticação**
|
||
|
|
|
||
|
|
- `POST /api/auth/signin` - Login
|
||
|
|
- `POST /api/auth/signout` - Logout
|
||
|
|
- `GET /api/auth/get-session` - Verificar sessão
|
||
|
|
|
||
|
|
### **Organizações**
|
||
|
|
|
||
|
|
- `GET /api/organizations` - Listar organizações
|
||
|
|
- `POST /api/organizations` - Criar organização
|
||
|
|
- `PUT /api/organizations/[id]` - Editar organização
|
||
|
|
- `DELETE /api/organizations/[id]` - Remover organização
|
||
|
|
- `GET /api/organizations/[id]/members` - Listar membros
|
||
|
|
- `POST /api/organizations/[id]/members` - Adicionar membro
|
||
|
|
- `DELETE /api/organizations/[id]/members/[userId]` - Remover membro
|
||
|
|
|
||
|
|
### **Projetos**
|
||
|
|
|
||
|
|
- `GET /api/getProject` - Listar projetos
|
||
|
|
- `POST /api/getProject` - Criar projeto
|
||
|
|
- `GET /api/getProject/[id]` - Buscar projeto específico
|
||
|
|
|
||
|
|
### **Cards**
|
||
|
|
|
||
|
|
- `POST /api/createCard` - Criar card
|
||
|
|
- `PUT /api/updateCard` - Atualizar card
|
||
|
|
- `PUT /api/updateCardStatus` - Atualizar status
|
||
|
|
- `PUT /api/updateCardOrder` - Atualizar ordem
|
||
|
|
|
||
|
|
### **Tempo**
|
||
|
|
|
||
|
|
- `POST /api/saveTimeSpent` - Salvar tempo gasto
|
||
|
|
- `GET /api/getTimeSpentHistory/[cardId]` - Histórico de tempo
|
||
|
|
|
||
|
|
### **Usuários**
|
||
|
|
|
||
|
|
- `GET /api/users` - Listar usuários
|
||
|
|
|
||
|
|
## 🚀 Deploy
|
||
|
|
|
||
|
|
### **Vercel (Recomendado)**
|
||
|
|
|
||
|
|
1. **Conecte o repositório ao Vercel**
|
||
|
|
2. **Configure as variáveis de ambiente**:
|
||
|
|
|
||
|
|
- `DATABASE_URL`
|
||
|
|
- `GITHUB_CLIENT_ID`
|
||
|
|
- `GITHUB_CLIENT_SECRET`
|
||
|
|
- `BETTER_AUTH_URL`
|
||
|
|
- `NEXT_PUBLIC_API_URL`
|
||
|
|
|
||
|
|
3. **Deploy automático**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
git push origin main
|
||
|
|
```
|
||
|
|
|
||
|
|
### **Outras Plataformas**
|
||
|
|
|
||
|
|
O projeto pode ser deployado em qualquer plataforma que suporte Next.js:
|
||
|
|
|
||
|
|
- **Netlify**
|
||
|
|
- **Railway**
|
||
|
|
- **Heroku**
|
||
|
|
- **DigitalOcean App Platform**
|
||
|
|
|
||
|
|
## 🛠️ Comandos Úteis
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Desenvolvimento
|
||
|
|
npm run dev # Iniciar servidor de desenvolvimento
|
||
|
|
npm run build # Build para produção
|
||
|
|
npm run start # Iniciar servidor de produção
|
||
|
|
npm run lint # Executar ESLint
|
||
|
|
|
||
|
|
# Banco de dados
|
||
|
|
npm run db:generate # Gerar migrações
|
||
|
|
npm run db:push # Aplicar migrações
|
||
|
|
npm run db:studio # Abrir Drizzle Studio
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🤝 Contribuição
|
||
|
|
|
||
|
|
1. Fork o projeto
|
||
|
|
2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
|
||
|
|
3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`)
|
||
|
|
4. Push para a branch (`git push origin feature/AmazingFeature`)
|
||
|
|
5. Abra um Pull Request
|
||
|
|
|
||
|
|
## 📄 Licença
|
||
|
|
|
||
|
|
Este projeto está sob a licença MIT. Veja o arquivo `LICENSE` para mais detalhes.
|
||
|
|
|
||
|
|
## 🆘 Suporte
|
||
|
|
|
||
|
|
Para suporte, abra uma issue no repositório ou entre em contato através dos canais disponíveis.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Desenvolvido com ❤️ para facilitar a gestão de projetos e controle de tempo.**
|