# 🚀 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 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.**