Initial commit
This commit is contained in:
commit
f8c5d6c88e
|
|
@ -0,0 +1,42 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
/drizzle
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
@ -0,0 +1,376 @@
|
||||||
|
# 🚀 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.**
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { boolean, pgEnum, pgTable, text, timestamp } from 'drizzle-orm/pg-core';
|
||||||
|
|
||||||
|
export const userRoleEnum = pgEnum('user_role', ['admin', 'user']);
|
||||||
|
|
||||||
|
export const userTable = pgTable('user_table', {
|
||||||
|
id: text('id').primaryKey(),
|
||||||
|
name: text('name').notNull(),
|
||||||
|
email: text('email').notNull().unique(),
|
||||||
|
emailVerified: boolean('email_verified')
|
||||||
|
.$defaultFn(() => false)
|
||||||
|
.notNull(),
|
||||||
|
role: userRoleEnum('role').default('user'),
|
||||||
|
isActive: boolean('is_active').default(true),
|
||||||
|
image: text('image'),
|
||||||
|
createdAt: timestamp('created_at')
|
||||||
|
.$defaultFn(() => /* @__PURE__ */ new Date())
|
||||||
|
.notNull(),
|
||||||
|
updatedAt: timestamp('updated_at')
|
||||||
|
.$defaultFn(() => /* @__PURE__ */ new Date())
|
||||||
|
.notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const sessionTable = pgTable('session_table', {
|
||||||
|
id: text('id').primaryKey(),
|
||||||
|
expiresAt: timestamp('expires_at').notNull(),
|
||||||
|
token: text('token').notNull().unique(),
|
||||||
|
createdAt: timestamp('created_at').notNull(),
|
||||||
|
updatedAt: timestamp('updated_at').notNull(),
|
||||||
|
ipAddress: text('ip_address'),
|
||||||
|
userAgent: text('user_agent'),
|
||||||
|
userId: text('user_id')
|
||||||
|
.notNull()
|
||||||
|
.references(() => userTable.id, { onDelete: 'cascade' }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const accountTable = pgTable('account_table', {
|
||||||
|
id: text('id').primaryKey(),
|
||||||
|
accountId: text('account_id').notNull(),
|
||||||
|
providerId: text('provider_id').notNull(),
|
||||||
|
userId: text('user_id')
|
||||||
|
.notNull()
|
||||||
|
.references(() => userTable.id, { onDelete: 'cascade' }),
|
||||||
|
accessToken: text('access_token'),
|
||||||
|
refreshToken: text('refresh_token'),
|
||||||
|
idToken: text('id_token'),
|
||||||
|
accessTokenExpiresAt: timestamp('access_token_expires_at'),
|
||||||
|
refreshTokenExpiresAt: timestamp('refresh_token_expires_at'),
|
||||||
|
scope: text('scope'),
|
||||||
|
password: text('password'),
|
||||||
|
createdAt: timestamp('created_at').notNull(),
|
||||||
|
updatedAt: timestamp('updated_at').notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const verification = pgTable('verification', {
|
||||||
|
id: text('id').primaryKey(),
|
||||||
|
identifier: text('identifier').notNull(),
|
||||||
|
value: text('value').notNull(),
|
||||||
|
expiresAt: timestamp('expires_at').notNull(),
|
||||||
|
createdAt: timestamp('created_at').$defaultFn(
|
||||||
|
() => /* @__PURE__ */ new Date()
|
||||||
|
),
|
||||||
|
updatedAt: timestamp('updated_at').$defaultFn(
|
||||||
|
() => /* @__PURE__ */ new Date()
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import 'dotenv/config';
|
||||||
|
import { defineConfig } from 'drizzle-kit';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
out: './drizzle',
|
||||||
|
schema: './src/db/schema.ts',
|
||||||
|
dialect: 'postgresql',
|
||||||
|
schemaFilter: [process.env.NEXT_PUBLIC_DB_SCHEMA!],
|
||||||
|
|
||||||
|
dbCredentials: {
|
||||||
|
host: process.env.NEXT_PUBLIC_DB_HOST!,
|
||||||
|
port: Number(process.env.NEXT_PUBLIC_DB_PORT!),
|
||||||
|
user: process.env.NEXT_PUBLIC_DB_USER!,
|
||||||
|
password: process.env.NEXT_PUBLIC_DB_PASS!,
|
||||||
|
database: process.env.NEXT_PUBLIC_DB_NAME!,
|
||||||
|
ssl: { rejectUnauthorized: false },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { dirname } from "path";
|
||||||
|
import { fileURLToPath } from "url";
|
||||||
|
import { FlatCompat } from "@eslint/eslintrc";
|
||||||
|
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = dirname(__filename);
|
||||||
|
|
||||||
|
const compat = new FlatCompat({
|
||||||
|
baseDirectory: __dirname,
|
||||||
|
});
|
||||||
|
|
||||||
|
const eslintConfig = [
|
||||||
|
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||||
|
];
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import type { NextConfig } from 'next';
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'avatars.githubusercontent.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'lh3.googleusercontent.com',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Configurações de CORS para APIs
|
||||||
|
async headers() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
// Aplicar a todas as rotas da API
|
||||||
|
source: '/api/:path*',
|
||||||
|
headers: [
|
||||||
|
{ key: 'Access-Control-Allow-Credentials', value: 'true' },
|
||||||
|
{ key: 'Access-Control-Allow-Origin', value: '*' },
|
||||||
|
{
|
||||||
|
key: 'Access-Control-Allow-Methods',
|
||||||
|
value: 'GET,POST,PUT,DELETE,OPTIONS,PATCH',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Access-Control-Allow-Headers',
|
||||||
|
value: 'Content-Type, Authorization, X-Requested-With',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,67 @@
|
||||||
|
{
|
||||||
|
"name": "ferramenta-projeto",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev -p 8063",
|
||||||
|
"start:dev": "dotenv -e .env.dev -- next dev -p 8063",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start -p 8063",
|
||||||
|
"lint": "next lint",
|
||||||
|
"db:generate": "drizzle-kit generate",
|
||||||
|
"db:push": "drizzle-kit push",
|
||||||
|
"db:push:dev": "dotenv -e .env.dev -- drizzle-kit push",
|
||||||
|
"db:studio": "drizzle-kit studio",
|
||||||
|
"db:studio:dev": "dotenv -e .env.dev -- drizzle-kit studio"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dnd-kit/core": "^6.3.1",
|
||||||
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
|
"@neondatabase/serverless": "^1.0.1",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-aspect-ratio": "^1.1.7",
|
||||||
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
|
"@radix-ui/react-label": "^2.1.7",
|
||||||
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
|
"@radix-ui/react-tooltip": "^1.2.8",
|
||||||
|
"better-auth": "^1.3.7",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"dotenv": "^17.2.1",
|
||||||
|
"drizzle-orm": "^0.44.4",
|
||||||
|
"lucide-react": "^0.540.0",
|
||||||
|
"next": "^15.5.9",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"pg": "^8.16.3",
|
||||||
|
"react": "19.1.0",
|
||||||
|
"react-day-picker": "^9.9.0",
|
||||||
|
"react-dom": "19.1.0",
|
||||||
|
"react-resizable-panels": "^3.0.5",
|
||||||
|
"sonner": "^2.0.7",
|
||||||
|
"tailwind-merge": "^3.3.1",
|
||||||
|
"tunnel-rat": "^0.1.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/eslintrc": "^3",
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/pg": "^8.15.5",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"drizzle-kit": "^0.18.1",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "15.4.1",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.3.7",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const config = {
|
||||||
|
plugins: ["@tailwindcss/postcss"],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
|
|
@ -0,0 +1,13 @@
|
||||||
|
-- Script para criar o schema de desenvolvimento
|
||||||
|
-- Execute este script no banco 'projeto' para criar o schema 'dev'
|
||||||
|
|
||||||
|
-- Criar o schema dev se não existir
|
||||||
|
CREATE SCHEMA IF NOT EXISTS dev;
|
||||||
|
|
||||||
|
-- Definir o schema padrão para a sessão (opcional)
|
||||||
|
-- SET search_path TO dev, public;
|
||||||
|
|
||||||
|
-- Verificar se o schema foi criado
|
||||||
|
SELECT schema_name
|
||||||
|
FROM information_schema.schemata
|
||||||
|
WHERE schema_name = 'dev';
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { User } from '@/types/User';
|
||||||
|
import { Loader2, PlusIcon, Users } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface AddProjectMemberDialogProps {
|
||||||
|
project: Project;
|
||||||
|
availableUsers: User[];
|
||||||
|
onMemberAdded: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AddProjectMemberDialog({
|
||||||
|
project,
|
||||||
|
availableUsers,
|
||||||
|
onMemberAdded,
|
||||||
|
}: AddProjectMemberDialogProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [selectedUser, setSelectedUser] = useState('');
|
||||||
|
|
||||||
|
// Filtrar usuários que ainda não estão no projeto
|
||||||
|
const currentProjectUserIds = project.users?.map((user) => user.id) || [];
|
||||||
|
const availableUsersForProject = availableUsers.filter(
|
||||||
|
(user) => !currentProjectUserIds.includes(user.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleAddMember = async () => {
|
||||||
|
if (!selectedUser) {
|
||||||
|
toast.error('Selecione um usuário para adicionar');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/getProject/${project.id}/members`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
userId: selectedUser,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Erro ao adicionar membro');
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json();
|
||||||
|
|
||||||
|
toast.success('Membro adicionado com sucesso!');
|
||||||
|
|
||||||
|
// Resetar seleção
|
||||||
|
setSelectedUser('');
|
||||||
|
|
||||||
|
// Fechar dialog
|
||||||
|
setIsOpen(false);
|
||||||
|
|
||||||
|
// Chamar callback para atualizar a lista
|
||||||
|
onMemberAdded();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar membro:', error);
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error ? error.message : 'Erro ao adicionar membro'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (open: boolean) => {
|
||||||
|
setIsOpen(open);
|
||||||
|
if (!open) {
|
||||||
|
setSelectedUser('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="absolute top-2 right-12 z-10"
|
||||||
|
>
|
||||||
|
<Users className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Adicionar Membro ao Projeto</DialogTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Adicione um novo membro ao projeto {project.name}
|
||||||
|
</p>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-sm font-medium">Selecionar Usuário</label>
|
||||||
|
<Select value={selectedUser} onValueChange={setSelectedUser}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Escolha um usuário para adicionar" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{availableUsersForProject.length === 0 ? (
|
||||||
|
<SelectItem value="no-users" disabled>
|
||||||
|
Nenhum usuário disponível
|
||||||
|
</SelectItem>
|
||||||
|
) : (
|
||||||
|
availableUsersForProject.map((user) => (
|
||||||
|
<SelectItem key={user.id} value={user.id}>
|
||||||
|
{user.name} - {user.email}
|
||||||
|
</SelectItem>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{availableUsersForProject.length === 0 && (
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Todos os usuários da organização já estão neste projeto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" disabled={isLoading}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button
|
||||||
|
onClick={handleAddMember}
|
||||||
|
disabled={
|
||||||
|
isLoading ||
|
||||||
|
!selectedUser ||
|
||||||
|
availableUsersForProject.length === 0
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Adicionando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PlusIcon className="w-4 h-4 mr-2" />
|
||||||
|
Adicionar Membro
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,429 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Calendario } from '@/components/Calendario';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Organization, User } from '@/types/User';
|
||||||
|
import { Loader2, PlusIcon } from 'lucide-react';
|
||||||
|
import { useRef, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface CreateProjectDialogProps {
|
||||||
|
selectedOrganization: Organization | null;
|
||||||
|
uniqueUsers: User[];
|
||||||
|
onCreateProject: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProjectFormData {
|
||||||
|
name: string;
|
||||||
|
key: string;
|
||||||
|
description: string;
|
||||||
|
projectLeader: string;
|
||||||
|
status: string;
|
||||||
|
repository: string;
|
||||||
|
startDate: Date | undefined;
|
||||||
|
endDate: Date | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormErrors {
|
||||||
|
name?: string;
|
||||||
|
key?: string;
|
||||||
|
description?: string;
|
||||||
|
projectLeader?: string;
|
||||||
|
status?: string;
|
||||||
|
repository?: string;
|
||||||
|
startDate?: string;
|
||||||
|
endDate?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreateProjectDialog({
|
||||||
|
selectedOrganization,
|
||||||
|
uniqueUsers,
|
||||||
|
onCreateProject,
|
||||||
|
}: CreateProjectDialogProps) {
|
||||||
|
const startDateRef = useRef<{ getValue: () => Date | undefined }>(null);
|
||||||
|
const endDateRef = useRef<{ getValue: () => Date | undefined }>(null);
|
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [errors, setErrors] = useState<FormErrors>({});
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState<ProjectFormData>({
|
||||||
|
name: '',
|
||||||
|
key: '',
|
||||||
|
description: '',
|
||||||
|
projectLeader: '',
|
||||||
|
status: '1', // Ativo por padrão
|
||||||
|
repository: '',
|
||||||
|
startDate: undefined,
|
||||||
|
endDate: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
const validateForm = (): boolean => {
|
||||||
|
const newErrors: FormErrors = {};
|
||||||
|
|
||||||
|
// Validação do nome
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
newErrors.name = 'Nome do projeto é obrigatório';
|
||||||
|
} else if (formData.name.trim().length < 3) {
|
||||||
|
newErrors.name = 'Nome deve ter pelo menos 3 caracteres';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação da chave
|
||||||
|
if (!formData.key.trim()) {
|
||||||
|
newErrors.key = 'Chave do projeto é obrigatória';
|
||||||
|
} else if (formData.key.trim().length < 2) {
|
||||||
|
newErrors.key = 'Chave deve ter pelo menos 2 caracteres';
|
||||||
|
} else if (!/^[A-Z0-9]+$/.test(formData.key.trim())) {
|
||||||
|
newErrors.key = 'Chave deve conter apenas letras maiúsculas e números';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação da descrição
|
||||||
|
if (!formData.description.trim()) {
|
||||||
|
newErrors.description = 'Descrição do projeto é obrigatória';
|
||||||
|
} else if (formData.description.trim().length < 10) {
|
||||||
|
newErrors.description = 'Descrição deve ter pelo menos 10 caracteres';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação do líder do projeto
|
||||||
|
if (!formData.projectLeader) {
|
||||||
|
newErrors.projectLeader = 'Líder do projeto é obrigatório';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação do status
|
||||||
|
if (!formData.status) {
|
||||||
|
newErrors.status = 'Status do projeto é obrigatório';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação do repositório
|
||||||
|
if (!formData.repository) {
|
||||||
|
newErrors.repository = 'Repositório é obrigatório';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação das datas
|
||||||
|
const startDate = startDateRef.current?.getValue();
|
||||||
|
const endDate = endDateRef.current?.getValue();
|
||||||
|
|
||||||
|
if (!startDate) {
|
||||||
|
newErrors.startDate = 'Data de início é obrigatória';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (startDate && endDate && startDate > endDate) {
|
||||||
|
newErrors.endDate = 'Data de término deve ser posterior à data de início';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (field: keyof ProjectFormData, value: string) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||||
|
// Limpar erro do campo quando o usuário começar a digitar
|
||||||
|
if (errors[field]) {
|
||||||
|
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateProject = async () => {
|
||||||
|
if (!validateForm()) {
|
||||||
|
toast.error('Por favor, corrija os erros no formulário');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedOrganization) {
|
||||||
|
toast.error('Selecione uma organização no cabeçalho para criar projetos');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDate = startDateRef.current?.getValue();
|
||||||
|
const endDate = endDateRef.current?.getValue();
|
||||||
|
|
||||||
|
if (!startDate) {
|
||||||
|
toast.error('Data de início é obrigatória');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const projectData = {
|
||||||
|
name: formData.name.trim(),
|
||||||
|
description: formData.description.trim(),
|
||||||
|
projectUrl: '', // Será preenchido quando a integração com GitHub estiver pronta
|
||||||
|
initialDate: startDate.toISOString(),
|
||||||
|
finalDate: endDate ? endDate.toISOString() : null,
|
||||||
|
organizationId: selectedOrganization.id,
|
||||||
|
keyRepository: formData.key.trim(),
|
||||||
|
status: formData.status === '1' ? 'active' : 'inactive',
|
||||||
|
repositoryUrl: formData.repository || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch('/api/getProject', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(projectData),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Erro ao criar projeto');
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json();
|
||||||
|
|
||||||
|
toast.success('Projeto criado com sucesso!');
|
||||||
|
|
||||||
|
// Resetar formulário
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
key: '',
|
||||||
|
description: '',
|
||||||
|
projectLeader: '',
|
||||||
|
status: '1',
|
||||||
|
repository: '',
|
||||||
|
startDate: undefined,
|
||||||
|
endDate: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fechar dialog
|
||||||
|
setIsOpen(false);
|
||||||
|
|
||||||
|
// Chamar callback para atualizar a lista de projetos
|
||||||
|
onCreateProject();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar projeto:', error);
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error ? error.message : 'Erro ao criar projeto'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (open: boolean) => {
|
||||||
|
setIsOpen(open);
|
||||||
|
if (!open) {
|
||||||
|
// Resetar erros quando fechar o dialog
|
||||||
|
setErrors({});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<PlusIcon className="w-4 h-4 mr-2" />
|
||||||
|
Novo Projeto
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Novo Projeto</DialogTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Crie um novo projeto para começar a trabalhar!
|
||||||
|
</p>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-4 w-full">
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-name">Nome do Projeto *</Label>
|
||||||
|
<Input
|
||||||
|
id="project-name"
|
||||||
|
placeholder="Nome do Projeto"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
|
className={errors.name ? 'border-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<span className="text-sm text-red-500">{errors.name}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-key">Chave do Projeto *</Label>
|
||||||
|
<Input
|
||||||
|
id="project-key"
|
||||||
|
placeholder="Ex: DEV"
|
||||||
|
value={formData.key}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange('key', e.target.value.toUpperCase())
|
||||||
|
}
|
||||||
|
className={errors.key ? 'border-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{errors.key && (
|
||||||
|
<span className="text-sm text-red-500">{errors.key}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<Label htmlFor="project-description">
|
||||||
|
Descrição do Projeto *
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="project-description"
|
||||||
|
placeholder="Descreva o objetivo e escopo do projeto..."
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange('description', e.target.value)
|
||||||
|
}
|
||||||
|
className={errors.description ? 'border-red-500' : ''}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
{errors.description && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.description}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-full">
|
||||||
|
<Label>Organização</Label>
|
||||||
|
<div className="p-3 border rounded-md bg-muted/50">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{selectedOrganization?.name ||
|
||||||
|
'Nenhuma organização selecionada'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-leader">Líder do Projeto *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.projectLeader}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
handleInputChange('projectLeader', value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="project-leader"
|
||||||
|
className={errors.projectLeader ? 'border-red-500' : ''}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecione o Líder do Projeto" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{uniqueUsers.map((user) => (
|
||||||
|
<SelectItem key={user.id} value={user.id}>
|
||||||
|
{user.name} - {user.email}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.projectLeader && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.projectLeader}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-status">Status do Projeto *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.status}
|
||||||
|
onValueChange={(value) => handleInputChange('status', value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="project-status"
|
||||||
|
className={errors.status ? 'border-red-500' : ''}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecione o Status do Projeto" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="1">Ativo</SelectItem>
|
||||||
|
<SelectItem value="2">Inativo</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.status && (
|
||||||
|
<span className="text-sm text-red-500">{errors.status}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-full">
|
||||||
|
<Label htmlFor="project-repository">Repositório *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.repository}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
handleInputChange('repository', value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="project-repository"
|
||||||
|
className={errors.repository ? 'border-red-500' : ''}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecione o Repositório para o projeto" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="placeholder">
|
||||||
|
Carregando repositórios...
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.repository && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.repository}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Calendario ref={startDateRef} label="Data de Início *" />
|
||||||
|
{errors.startDate && (
|
||||||
|
<span className="text-sm text-red-500">{errors.startDate}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Calendario ref={endDateRef} label="Data de Término" />
|
||||||
|
{errors.endDate && (
|
||||||
|
<span className="text-sm text-red-500">{errors.endDate}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" disabled={isLoading}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button onClick={handleCreateProject} disabled={isLoading}>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Criando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Criar Projeto'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useOrganization } from '@/context/organizationContext';
|
||||||
|
import useAuth from '@/hook/useAuth';
|
||||||
|
import { useOrganizationSync } from '@/hooks/use-mobile';
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { OrganizationMember, User } from '@/types/User';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { CreateProjectDialog } from './CreateProjectDialog';
|
||||||
|
import { DashboardFilters } from './DashboardFilters';
|
||||||
|
import { DashboardHeader } from './DashboardHeader';
|
||||||
|
import { DashboardProjects } from './DashboardProjects';
|
||||||
|
import { DashboardStats } from './DashboardStats';
|
||||||
|
|
||||||
|
export function DashboardClient() {
|
||||||
|
const { isAuthenticated } = useAuth();
|
||||||
|
const { selectedOrganization } = useOrganization();
|
||||||
|
const isOrganizationInitialized = useOrganizationSync();
|
||||||
|
|
||||||
|
const [projects, setProjects] = useState<Project[] | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState('all');
|
||||||
|
const [uniqueUsers, setUniqueUsers] = useState<User[]>([]);
|
||||||
|
|
||||||
|
// Ref para controlar se os dados foram carregados para a organização atual
|
||||||
|
const lastLoadedOrgId = useRef<string | null>(null);
|
||||||
|
|
||||||
|
// Função auxiliar para calcular estatísticas com valores padrão
|
||||||
|
const calculateStats = () => {
|
||||||
|
if (!projects || projects.length === 0) {
|
||||||
|
return {
|
||||||
|
totalProjects: 0,
|
||||||
|
activeProjects: 0,
|
||||||
|
activeCards: 0,
|
||||||
|
completedCards: 0,
|
||||||
|
estimatedHours: 0,
|
||||||
|
spentHours: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalProjects: projects.length,
|
||||||
|
activeProjects: projects.filter((project) => project.status === 'active')
|
||||||
|
.length,
|
||||||
|
activeCards: projects.reduce((acc, project) => {
|
||||||
|
return (
|
||||||
|
acc +
|
||||||
|
(project.cards?.filter((card) => card.status !== 'Concluido')
|
||||||
|
.length || 0)
|
||||||
|
);
|
||||||
|
}, 0),
|
||||||
|
completedCards: projects.reduce((acc, project) => {
|
||||||
|
return (
|
||||||
|
acc +
|
||||||
|
(project.cards?.filter((card) => card.status === 'Concluido')
|
||||||
|
.length || 0)
|
||||||
|
);
|
||||||
|
}, 0),
|
||||||
|
estimatedHours: projects.reduce((acc, project) => {
|
||||||
|
return (
|
||||||
|
acc +
|
||||||
|
(project.cards?.reduce((cardAcc, card) => {
|
||||||
|
return cardAcc + (card.hours || 0);
|
||||||
|
}, 0) || 0)
|
||||||
|
);
|
||||||
|
}, 0),
|
||||||
|
spentHours: projects.reduce((acc, project) => {
|
||||||
|
return (
|
||||||
|
acc +
|
||||||
|
(project.cards?.reduce((cardAcc, card) => {
|
||||||
|
return cardAcc + (card.timeSpent || 0);
|
||||||
|
}, 0) || 0)
|
||||||
|
);
|
||||||
|
}, 0),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para obter usuários únicos de todos os projetos
|
||||||
|
const getUniqueUsers = () => {
|
||||||
|
if (!projects) return [];
|
||||||
|
|
||||||
|
const allUsers = new Map();
|
||||||
|
|
||||||
|
projects.forEach((project) => {
|
||||||
|
project.users?.forEach((user) => {
|
||||||
|
if (!allUsers.has(user.id)) {
|
||||||
|
allUsers.set(user.id, user);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return Array.from(allUsers.values());
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para buscar membros da organização
|
||||||
|
const getOrganizationMembers = async (organizationId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members`
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
return result.data || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar membros da organização:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para obter membros da organização selecionada
|
||||||
|
const getOrganizationUsers = async () => {
|
||||||
|
if (!selectedOrganization) return [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
const members = await getOrganizationMembers(selectedOrganization.id);
|
||||||
|
return members
|
||||||
|
.map((member: OrganizationMember) => member.user)
|
||||||
|
.filter(Boolean);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar usuários da organização:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para buscar projetos
|
||||||
|
const getProjects = async (): Promise<Project[]> => {
|
||||||
|
try {
|
||||||
|
const url = new URL('/api/getProject', window.location.origin);
|
||||||
|
if (selectedOrganization?.id) {
|
||||||
|
url.searchParams.set('organizationId', selectedOrganization.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url.toString());
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
return result.data || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar projetos:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função principal para carregar dados
|
||||||
|
const loadDashboardData = async (forceRefresh = false) => {
|
||||||
|
try {
|
||||||
|
// Verificar se já carregamos dados para esta organização
|
||||||
|
if (
|
||||||
|
!forceRefresh &&
|
||||||
|
lastLoadedOrgId.current === selectedOrganization?.id
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isRefreshing) {
|
||||||
|
setIsLoading(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const session = await authClient.getSession();
|
||||||
|
if (session?.data?.user && selectedOrganization) {
|
||||||
|
const projectsData = await getProjects();
|
||||||
|
setProjects(projectsData);
|
||||||
|
|
||||||
|
// Buscar usuários da organização
|
||||||
|
const orgUsers = await getOrganizationUsers();
|
||||||
|
setUniqueUsers(orgUsers);
|
||||||
|
|
||||||
|
// Marcar que carregamos dados para esta organização
|
||||||
|
lastLoadedOrgId.current = selectedOrganization.id;
|
||||||
|
} else {
|
||||||
|
// Limpar dados se não há organização selecionada
|
||||||
|
setProjects(null);
|
||||||
|
setUniqueUsers([]);
|
||||||
|
lastLoadedOrgId.current = null;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar dados do usuário:', error);
|
||||||
|
// Em caso de erro, limpar dados para evitar mostrar dados incorretos
|
||||||
|
setProjects(null);
|
||||||
|
setUniqueUsers([]);
|
||||||
|
lastLoadedOrgId.current = null;
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
setIsRefreshing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Carregar dados quando a autenticação ou organização mudar
|
||||||
|
useEffect(() => {
|
||||||
|
if (isAuthenticated && selectedOrganization && isOrganizationInitialized) {
|
||||||
|
loadDashboardData();
|
||||||
|
} else if (
|
||||||
|
isAuthenticated &&
|
||||||
|
!selectedOrganization &&
|
||||||
|
isOrganizationInitialized
|
||||||
|
) {
|
||||||
|
// Se está autenticado mas não há organização selecionada, limpar dados
|
||||||
|
setProjects(null);
|
||||||
|
setUniqueUsers([]);
|
||||||
|
lastLoadedOrgId.current = null;
|
||||||
|
setIsLoading(false);
|
||||||
|
setIsRefreshing(false);
|
||||||
|
} else if (!isAuthenticated) {
|
||||||
|
setIsLoading(false);
|
||||||
|
setIsRefreshing(false);
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, selectedOrganization?.id, isOrganizationInitialized]);
|
||||||
|
|
||||||
|
// Detectar mudanças na organização e mostrar estado de atualização
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedOrganization && isAuthenticated && isOrganizationInitialized) {
|
||||||
|
setIsRefreshing(true);
|
||||||
|
loadDashboardData(true); // Forçar recarregamento
|
||||||
|
}
|
||||||
|
}, [selectedOrganization?.id, isOrganizationInitialized]);
|
||||||
|
|
||||||
|
const stats = calculateStats();
|
||||||
|
|
||||||
|
const handleCreateProject = async () => {
|
||||||
|
// Recarregar projetos após criar um novo
|
||||||
|
try {
|
||||||
|
setIsRefreshing(true);
|
||||||
|
await loadDashboardData(true);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao recarregar projetos:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<div className="container mx-auto px-4 py-2">
|
||||||
|
<header className="flex justify-between items-center">
|
||||||
|
<DashboardHeader isRefreshing={isRefreshing} />
|
||||||
|
<CreateProjectDialog
|
||||||
|
selectedOrganization={selectedOrganization}
|
||||||
|
uniqueUsers={uniqueUsers}
|
||||||
|
onCreateProject={handleCreateProject}
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
<main className="flex flex-col gap-6">
|
||||||
|
{/* Cards de Estatísticas */}
|
||||||
|
<DashboardStats
|
||||||
|
stats={stats}
|
||||||
|
isLoading={isLoading}
|
||||||
|
selectedOrganization={selectedOrganization}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Filtros e Busca */}
|
||||||
|
<DashboardFilters
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
onSearchChange={setSearchTerm}
|
||||||
|
statusFilter={statusFilter}
|
||||||
|
onStatusFilterChange={setStatusFilter}
|
||||||
|
selectedOrganization={selectedOrganization}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Lista de Projetos */}
|
||||||
|
<DashboardProjects
|
||||||
|
projects={projects}
|
||||||
|
isLoading={isLoading}
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
statusFilter={statusFilter}
|
||||||
|
selectedOrganization={selectedOrganization}
|
||||||
|
uniqueUsers={uniqueUsers}
|
||||||
|
onProjectUpdated={handleCreateProject}
|
||||||
|
/>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import BarraBusca from '@/components/BarraBusca';
|
||||||
|
import Seletor from '@/components/Seletor';
|
||||||
|
import { Organization } from '@/types/User';
|
||||||
|
|
||||||
|
interface DashboardFiltersProps {
|
||||||
|
searchTerm: string;
|
||||||
|
onSearchChange: (value: string) => void;
|
||||||
|
statusFilter: string;
|
||||||
|
onStatusFilterChange: (value: string) => void;
|
||||||
|
selectedOrganization: Organization | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DashboardFilters({
|
||||||
|
searchTerm,
|
||||||
|
onSearchChange,
|
||||||
|
statusFilter,
|
||||||
|
onStatusFilterChange,
|
||||||
|
selectedOrganization,
|
||||||
|
}: DashboardFiltersProps) {
|
||||||
|
if (!selectedOrganization) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<BarraBusca
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
onSearchChange={onSearchChange}
|
||||||
|
placeHolder="Buscar projeto..."
|
||||||
|
/>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Seletor
|
||||||
|
placheHolder="Status"
|
||||||
|
value={statusFilter}
|
||||||
|
onValueChange={onStatusFilterChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'all', label: 'Todos' },
|
||||||
|
{ value: 'active', label: 'Ativo' },
|
||||||
|
{ value: 'inactive', label: 'Inativo' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
interface DashboardHeaderProps {
|
||||||
|
isRefreshing?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DashboardHeader({ isRefreshing }: DashboardHeaderProps) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-foreground">
|
||||||
|
Dashboard de Projetos
|
||||||
|
</h1>
|
||||||
|
<p className="text-md text-muted-foreground">
|
||||||
|
Gerencie seus projetos, sprints e tarefas!
|
||||||
|
{isRefreshing && (
|
||||||
|
<span className="ml-2 text-sm text-blue-500">
|
||||||
|
Atualizando dados da organização...
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import ProjectList from '@/components/ProjectList';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { Organization, User } from '@/types/User';
|
||||||
|
|
||||||
|
interface DashboardProjectsProps {
|
||||||
|
projects: Project[] | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
searchTerm: string;
|
||||||
|
statusFilter: string;
|
||||||
|
selectedOrganization: Organization | null;
|
||||||
|
uniqueUsers: User[];
|
||||||
|
onProjectUpdated: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DashboardProjects({
|
||||||
|
projects,
|
||||||
|
isLoading,
|
||||||
|
searchTerm,
|
||||||
|
statusFilter,
|
||||||
|
selectedOrganization,
|
||||||
|
uniqueUsers,
|
||||||
|
onProjectUpdated,
|
||||||
|
}: DashboardProjectsProps) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-foreground mb-4">
|
||||||
|
Meus Projetos
|
||||||
|
{selectedOrganization && (
|
||||||
|
<span className="text-sm font-normal text-muted-foreground ml-2">
|
||||||
|
- {selectedOrganization.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{!selectedOrganization ? (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Selecione uma organização no cabeçalho para visualizar os projetos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ProjectList
|
||||||
|
projects={projects}
|
||||||
|
isLoading={isLoading}
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
statusFilter={statusFilter}
|
||||||
|
selectedOrganization={selectedOrganization}
|
||||||
|
uniqueUsers={uniqueUsers}
|
||||||
|
onProjectUpdated={onProjectUpdated}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
import CardDash from '@/components/CardDash';
|
||||||
|
import { Organization } from '@/types/User';
|
||||||
|
import { BarChart3Icon } from 'lucide-react';
|
||||||
|
|
||||||
|
interface DashboardStatsProps {
|
||||||
|
stats: {
|
||||||
|
totalProjects: number;
|
||||||
|
activeProjects: number;
|
||||||
|
activeCards: number;
|
||||||
|
completedCards: number;
|
||||||
|
estimatedHours: number;
|
||||||
|
spentHours: number;
|
||||||
|
};
|
||||||
|
isLoading: boolean;
|
||||||
|
selectedOrganization: Organization | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DashboardStats({
|
||||||
|
stats,
|
||||||
|
isLoading,
|
||||||
|
selectedOrganization,
|
||||||
|
}: DashboardStatsProps) {
|
||||||
|
// Verificar se os dados estão sendo carregados para a organização correta
|
||||||
|
const isDataLoading = isLoading || !selectedOrganization;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Indicador da organização atual */}
|
||||||
|
{selectedOrganization && (
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Estatísticas para:{' '}
|
||||||
|
<span className="font-medium text-foreground">
|
||||||
|
{selectedOrganization.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||||
|
<CardDash
|
||||||
|
title="Projetos Ativos"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.activeProjects}
|
||||||
|
description="Projetos Ativados"
|
||||||
|
calculate={() => stats.activeProjects}
|
||||||
|
isLoading={isDataLoading}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Cards Ativos"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.activeCards}
|
||||||
|
description="Cards Ativos"
|
||||||
|
isLoading={isDataLoading}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Cards Concluidos"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.completedCards}
|
||||||
|
description="Cards Concluido"
|
||||||
|
isLoading={isDataLoading}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Horas Estimadas"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.estimatedHours}
|
||||||
|
description="Horas Estimadas"
|
||||||
|
isLoading={isDataLoading}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Horas Produzidas"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
caculavel={true}
|
||||||
|
valueProject={stats.estimatedHours}
|
||||||
|
value={stats.spentHours}
|
||||||
|
description="Horas Produzidas"
|
||||||
|
isLoading={isDataLoading}
|
||||||
|
formatAsTime={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,550 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Calendario } from '@/components/Calendario';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { Organization, User } from '@/types/User';
|
||||||
|
import { Loader2, PencilIcon, TrashIcon } from 'lucide-react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface EditProjectDialogProps {
|
||||||
|
project: Project;
|
||||||
|
selectedOrganization: Organization | null;
|
||||||
|
uniqueUsers: User[];
|
||||||
|
onProjectUpdated: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProjectFormData {
|
||||||
|
name: string;
|
||||||
|
key: string;
|
||||||
|
description: string;
|
||||||
|
projectLeader: string;
|
||||||
|
status: string;
|
||||||
|
repository: string;
|
||||||
|
startDate: Date | undefined;
|
||||||
|
endDate: Date | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormErrors {
|
||||||
|
name?: string;
|
||||||
|
key?: string;
|
||||||
|
description?: string;
|
||||||
|
projectLeader?: string;
|
||||||
|
status?: string;
|
||||||
|
repository?: string;
|
||||||
|
startDate?: string;
|
||||||
|
endDate?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EditProjectDialog({
|
||||||
|
project,
|
||||||
|
selectedOrganization,
|
||||||
|
uniqueUsers,
|
||||||
|
onProjectUpdated,
|
||||||
|
}: EditProjectDialogProps) {
|
||||||
|
const startDateRef = useRef<{ getValue: () => Date | undefined }>(null);
|
||||||
|
const endDateRef = useRef<{ getValue: () => Date | undefined }>(null);
|
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [errors, setErrors] = useState<FormErrors>({});
|
||||||
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||||
|
const [projectNameToDelete, setProjectNameToDelete] = useState('');
|
||||||
|
const [isDeletingProject, setIsDeletingProject] = useState(false);
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState<ProjectFormData>({
|
||||||
|
name: '',
|
||||||
|
key: '',
|
||||||
|
description: '',
|
||||||
|
projectLeader: '',
|
||||||
|
status: '1',
|
||||||
|
repository: '',
|
||||||
|
startDate: undefined,
|
||||||
|
endDate: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Carregar dados do projeto quando o dialog abrir
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && project) {
|
||||||
|
setFormData({
|
||||||
|
name: project.name || '',
|
||||||
|
key: project.keyRepository || '',
|
||||||
|
description: project.description || '',
|
||||||
|
projectLeader: project.users?.[0]?.id || '',
|
||||||
|
status: project.status === 'active' ? '1' : '2',
|
||||||
|
repository: project.repositoryUrl || '',
|
||||||
|
startDate: project.initialDate
|
||||||
|
? new Date(project.initialDate)
|
||||||
|
: undefined,
|
||||||
|
endDate: project.finalDate ? new Date(project.finalDate) : undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [isOpen, project]);
|
||||||
|
|
||||||
|
const validateForm = (): boolean => {
|
||||||
|
const newErrors: FormErrors = {};
|
||||||
|
|
||||||
|
// Validação do nome
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
newErrors.name = 'Nome do projeto é obrigatório';
|
||||||
|
} else if (formData.name.trim().length < 3) {
|
||||||
|
newErrors.name = 'Nome deve ter pelo menos 3 caracteres';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação da chave
|
||||||
|
if (!formData.key.trim()) {
|
||||||
|
newErrors.key = 'Chave do projeto é obrigatória';
|
||||||
|
} else if (formData.key.trim().length < 2) {
|
||||||
|
newErrors.key = 'Chave deve ter pelo menos 2 caracteres';
|
||||||
|
} else if (!/^[A-Z0-9]+$/.test(formData.key.trim())) {
|
||||||
|
newErrors.key = 'Chave deve conter apenas letras maiúsculas e números';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação da descrição
|
||||||
|
if (!formData.description.trim()) {
|
||||||
|
newErrors.description = 'Descrição do projeto é obrigatória';
|
||||||
|
} else if (formData.description.trim().length < 10) {
|
||||||
|
newErrors.description = 'Descrição deve ter pelo menos 10 caracteres';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação do líder do projeto
|
||||||
|
if (!formData.projectLeader) {
|
||||||
|
newErrors.projectLeader = 'Líder do projeto é obrigatório';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação do status
|
||||||
|
if (!formData.status) {
|
||||||
|
newErrors.status = 'Status do projeto é obrigatório';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação do repositório
|
||||||
|
if (!formData.repository) {
|
||||||
|
newErrors.repository = 'Repositório é obrigatório';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validação das datas
|
||||||
|
const startDate = startDateRef.current?.getValue();
|
||||||
|
const endDate = endDateRef.current?.getValue();
|
||||||
|
|
||||||
|
if (!startDate) {
|
||||||
|
newErrors.startDate = 'Data de início é obrigatória';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (startDate && endDate && startDate > endDate) {
|
||||||
|
newErrors.endDate = 'Data de término deve ser posterior à data de início';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (field: keyof ProjectFormData, value: string) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||||
|
// Limpar erro do campo quando o usuário começar a digitar
|
||||||
|
if (errors[field]) {
|
||||||
|
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateProject = async () => {
|
||||||
|
if (!validateForm()) {
|
||||||
|
toast.error('Por favor, corrija os erros no formulário');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedOrganization) {
|
||||||
|
toast.error(
|
||||||
|
'Selecione uma organização no cabeçalho para editar projetos'
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDate = startDateRef.current?.getValue();
|
||||||
|
const endDate = endDateRef.current?.getValue();
|
||||||
|
|
||||||
|
if (!startDate) {
|
||||||
|
toast.error('Data de início é obrigatória');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const projectData = {
|
||||||
|
name: formData.name.trim(),
|
||||||
|
description: formData.description.trim(),
|
||||||
|
projectUrl: '', // Será preenchido quando a integração com GitHub estiver pronta
|
||||||
|
initialDate: startDate.toISOString(),
|
||||||
|
finalDate: endDate ? endDate.toISOString() : null,
|
||||||
|
organizationId: selectedOrganization.id,
|
||||||
|
keyRepository: formData.key.trim(),
|
||||||
|
status: formData.status === '1' ? 'active' : 'inactive',
|
||||||
|
repositoryUrl: formData.repository || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`/api/getProject/${project.id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(projectData),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Erro ao atualizar projeto');
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json();
|
||||||
|
|
||||||
|
toast.success('Projeto atualizado com sucesso!');
|
||||||
|
|
||||||
|
// Fechar dialog
|
||||||
|
setIsOpen(false);
|
||||||
|
|
||||||
|
// Chamar callback para atualizar a lista de projetos
|
||||||
|
onProjectUpdated();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar projeto:', error);
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error ? error.message : 'Erro ao atualizar projeto'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteProject = async () => {
|
||||||
|
if (projectNameToDelete !== project.name) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsDeletingProject(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/getProject/${project.id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Erro ao deletar projeto');
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json();
|
||||||
|
|
||||||
|
toast.success('Projeto deletado com sucesso!');
|
||||||
|
|
||||||
|
// Fechar dialogs
|
||||||
|
setIsDeleteDialogOpen(false);
|
||||||
|
setIsOpen(false);
|
||||||
|
setProjectNameToDelete('');
|
||||||
|
|
||||||
|
// Chamar callback para atualizar a lista de projetos
|
||||||
|
onProjectUpdated();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao deletar projeto:', error);
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error ? error.message : 'Erro ao deletar projeto'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsDeletingProject(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (open: boolean) => {
|
||||||
|
setIsOpen(open);
|
||||||
|
if (!open) {
|
||||||
|
// Resetar erros quando fechar o dialog
|
||||||
|
setErrors({});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="absolute top-2 right-2 z-10 dark:bg-card dark:hover:bg-muted/90"
|
||||||
|
>
|
||||||
|
<PencilIcon className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Editar Projeto</DialogTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Edite as informações do projeto {project.name}
|
||||||
|
</p>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-4 w-full">
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-name">Nome do Projeto *</Label>
|
||||||
|
<Input
|
||||||
|
id="project-name"
|
||||||
|
placeholder="Nome do Projeto"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
|
className={errors.name ? 'border-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<span className="text-sm text-red-500">{errors.name}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-key">Chave do Projeto *</Label>
|
||||||
|
<Input
|
||||||
|
id="project-key"
|
||||||
|
placeholder="Ex: DEV"
|
||||||
|
value={formData.key}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange('key', e.target.value.toUpperCase())
|
||||||
|
}
|
||||||
|
className={errors.key ? 'border-red-500' : ''}
|
||||||
|
/>
|
||||||
|
{errors.key && (
|
||||||
|
<span className="text-sm text-red-500">{errors.key}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<Label htmlFor="project-description">
|
||||||
|
Descrição do Projeto *
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="project-description"
|
||||||
|
placeholder="Descreva o objetivo e escopo do projeto..."
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange('description', e.target.value)
|
||||||
|
}
|
||||||
|
className={errors.description ? 'border-red-500' : ''}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
{errors.description && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.description}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-full">
|
||||||
|
<Label>Organização</Label>
|
||||||
|
<div className="p-3 border rounded-md bg-muted/50">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{selectedOrganization?.name ||
|
||||||
|
'Nenhuma organização selecionada'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-leader">Líder do Projeto *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.projectLeader}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
handleInputChange('projectLeader', value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="project-leader"
|
||||||
|
className={errors.projectLeader ? 'border-red-500' : ''}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecione o Líder do Projeto" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{uniqueUsers.map((user) => (
|
||||||
|
<SelectItem key={user.id} value={user.id}>
|
||||||
|
{user.name} - {user.email}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.projectLeader && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.projectLeader}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Label htmlFor="project-status">Status do Projeto *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.status}
|
||||||
|
onValueChange={(value) => handleInputChange('status', value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="project-status"
|
||||||
|
className={errors.status ? 'border-red-500' : ''}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecione o Status do Projeto" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="1">Ativo</SelectItem>
|
||||||
|
<SelectItem value="2">Inativo</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.status && (
|
||||||
|
<span className="text-sm text-red-500">{errors.status}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-full">
|
||||||
|
<Label htmlFor="project-repository">Repositório *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.repository}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
handleInputChange('repository', value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="project-repository"
|
||||||
|
className={errors.repository ? 'border-red-500' : ''}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecione o Repositório para o projeto" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="placeholder">
|
||||||
|
Carregando repositórios...
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.repository && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.repository}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 w-full">
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Calendario ref={startDateRef} label="Data de Início *" />
|
||||||
|
{errors.startDate && (
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{errors.startDate}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 w-1/2">
|
||||||
|
<Calendario ref={endDateRef} label="Data de Término" />
|
||||||
|
{errors.endDate && (
|
||||||
|
<span className="text-sm text-red-500">{errors.endDate}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter className="flex justify-between">
|
||||||
|
<Dialog
|
||||||
|
open={isDeleteDialogOpen}
|
||||||
|
onOpenChange={setIsDeleteDialogOpen}
|
||||||
|
>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="destructive" size="sm" className="mr-auto">
|
||||||
|
<TrashIcon className="w-4 h-4 mr-2" />
|
||||||
|
Excluir Projeto
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Excluir projeto</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Esta ação não pode ser desfeita. Para confirmar a exclusão
|
||||||
|
do projeto, digite o nome exato:{' '}
|
||||||
|
<strong>{project.name}</strong>
|
||||||
|
</p>
|
||||||
|
<Label htmlFor="project-name-delete">Nome do projeto:</Label>
|
||||||
|
<Input
|
||||||
|
id="project-name-delete"
|
||||||
|
type="text"
|
||||||
|
className="w-full"
|
||||||
|
value={projectNameToDelete}
|
||||||
|
onChange={(e) => {
|
||||||
|
setProjectNameToDelete(e.target.value);
|
||||||
|
}}
|
||||||
|
placeholder="Digite o nome do projeto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
disabled={
|
||||||
|
projectNameToDelete !== project.name || isDeletingProject
|
||||||
|
}
|
||||||
|
onClick={handleDeleteProject}
|
||||||
|
>
|
||||||
|
{isDeletingProject ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Excluindo...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Excluir'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" disabled={isLoading}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button onClick={handleUpdateProject} disabled={isLoading}>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Atualizando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Atualizar Projeto'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { User } from '@/types/User';
|
||||||
|
import { Loader2, PlusIcon, Trash2, Users } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface ProjectMembersDialogProps {
|
||||||
|
project: Project;
|
||||||
|
availableUsers: User[];
|
||||||
|
onMembersChanged: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProjectMembersDialog({
|
||||||
|
project,
|
||||||
|
availableUsers,
|
||||||
|
onMembersChanged,
|
||||||
|
}: ProjectMembersDialogProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isRemoving, setIsRemoving] = useState<string | null>(null);
|
||||||
|
const [selectedUser, setSelectedUser] = useState('');
|
||||||
|
|
||||||
|
// Filtrar usuários que ainda não estão no projeto
|
||||||
|
const currentProjectUserIds = project.users?.map((user) => user.id) || [];
|
||||||
|
const availableUsersForProject = availableUsers.filter(
|
||||||
|
(user) => !currentProjectUserIds.includes(user.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleAddMember = async () => {
|
||||||
|
if (!selectedUser) {
|
||||||
|
toast.error('Selecione um usuário para adicionar');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/getProject/${project.id}/members`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
userId: selectedUser,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Erro ao adicionar membro');
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json();
|
||||||
|
|
||||||
|
toast.success('Membro adicionado com sucesso!');
|
||||||
|
|
||||||
|
// Resetar seleção
|
||||||
|
setSelectedUser('');
|
||||||
|
|
||||||
|
// Chamar callback para atualizar a lista
|
||||||
|
onMembersChanged();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar membro:', error);
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error ? error.message : 'Erro ao adicionar membro'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveMember = async (userId: string) => {
|
||||||
|
setIsRemoving(userId);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/getProject/${project.id}/members?userId=${userId}`,
|
||||||
|
{
|
||||||
|
method: 'DELETE',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Erro ao remover membro');
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json();
|
||||||
|
|
||||||
|
toast.success('Membro removido com sucesso!');
|
||||||
|
|
||||||
|
// Chamar callback para atualizar a lista
|
||||||
|
onMembersChanged();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao remover membro:', error);
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error ? error.message : 'Erro ao remover membro'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setIsRemoving(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (open: boolean) => {
|
||||||
|
setIsOpen(open);
|
||||||
|
if (!open) {
|
||||||
|
setSelectedUser('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="absolute top-2 right-12 z-10"
|
||||||
|
>
|
||||||
|
<Users className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Gerenciar Membros do Projeto</DialogTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Visualize e gerencie os membros do projeto {project.name}
|
||||||
|
</p>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* Lista de Membros Atuais */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<h3 className="text-sm font-medium">
|
||||||
|
Membros Atuais ({project.users?.length || 0})
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{!project.users || project.users.length === 0 ? (
|
||||||
|
<div className="text-center py-4 border rounded-md">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Nenhum membro no projeto ainda.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{project.users.map((user) => (
|
||||||
|
<div
|
||||||
|
key={user.id}
|
||||||
|
className="flex items-center justify-between p-3 border rounded-md"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div>
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage
|
||||||
|
src={user.image || undefined}
|
||||||
|
alt={user.name}
|
||||||
|
/>
|
||||||
|
<AvatarFallback>
|
||||||
|
{(() => {
|
||||||
|
const names = user.name.trim().split(' ');
|
||||||
|
if (names.length >= 2) {
|
||||||
|
return `${names[0]
|
||||||
|
.charAt(0)
|
||||||
|
.toUpperCase()}${names[1]
|
||||||
|
.charAt(0)
|
||||||
|
.toUpperCase()}`;
|
||||||
|
}
|
||||||
|
return names[0].charAt(0).toUpperCase();
|
||||||
|
})()}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium">{user.name}</span>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{user.email}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleRemoveMember(user.id)}
|
||||||
|
disabled={isRemoving === user.id}
|
||||||
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
{isRemoving === user.id ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Adicionar Novo Membro */}
|
||||||
|
{availableUsersForProject.length > 0 && (
|
||||||
|
<div className="flex flex-col gap-3 border-t pt-4">
|
||||||
|
<h3 className="text-sm font-medium">Adicionar Novo Membro</h3>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<Select value={selectedUser} onValueChange={setSelectedUser}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Escolha um usuário para adicionar" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{availableUsersForProject.map((user) => (
|
||||||
|
<SelectItem key={user.id} value={user.id}>
|
||||||
|
{user.name} - {user.email}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={handleAddMember}
|
||||||
|
disabled={isLoading || !selectedUser}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Adicionando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PlusIcon className="w-4 h-4 mr-2" />
|
||||||
|
Adicionar
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{availableUsersForProject.length === 0 &&
|
||||||
|
project.users &&
|
||||||
|
project.users.length > 0 && (
|
||||||
|
<div className="text-center py-4 border rounded-md">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Todos os usuários da organização já estão neste projeto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline">Fechar</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
# Dashboard Components
|
||||||
|
|
||||||
|
Esta pasta contém os componentes recomponentizados do dashboard, organizados para otimizar a performance e separar responsabilidades entre server-side e client-side.
|
||||||
|
|
||||||
|
## Estrutura de Componentes
|
||||||
|
|
||||||
|
### Server-Side Components (SSR)
|
||||||
|
|
||||||
|
- **DashboardHeader**: Cabeçalho com título e descrição
|
||||||
|
- **DashboardStats**: Cards de estatísticas dos projetos
|
||||||
|
- **DashboardProjects**: Seção de listagem de projetos
|
||||||
|
|
||||||
|
### Client-Side Components (CSR)
|
||||||
|
|
||||||
|
- **DashboardClient**: Componente principal que gerencia estado e requisições
|
||||||
|
- **DashboardFilters**: Filtros de busca e status
|
||||||
|
- **CreateProjectDialog**: Diálogo para criação de novos projetos
|
||||||
|
|
||||||
|
## Benefícios da Recomponentização
|
||||||
|
|
||||||
|
1. **Performance**: Componentes server-side são renderizados no servidor, reduzindo o JavaScript no cliente
|
||||||
|
2. **SEO**: Melhor indexação para conteúdo estático
|
||||||
|
3. **Manutenibilidade**: Código mais organizado e responsabilidades bem definidas
|
||||||
|
4. **Reutilização**: Componentes podem ser facilmente reutilizados em outras partes da aplicação
|
||||||
|
|
||||||
|
## Como Usar
|
||||||
|
|
||||||
|
O componente principal `DashboardClient` gerencia todo o estado e as requisições de API, enquanto os outros componentes são responsáveis apenas pela renderização da UI.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// page.tsx (Server Component)
|
||||||
|
import { DashboardClient } from './components/DashboardClient';
|
||||||
|
|
||||||
|
export default function DashboardPage() {
|
||||||
|
return <DashboardClient />;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Fluxo de Dados
|
||||||
|
|
||||||
|
1. `DashboardClient` faz as requisições de API e gerencia o estado
|
||||||
|
2. Os dados são passados como props para os componentes filhos
|
||||||
|
3. Componentes server-side renderizam o conteúdo estático
|
||||||
|
4. Componentes client-side lidam com interações do usuário
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export { CreateProjectDialog } from './CreateProjectDialog';
|
||||||
|
export { DashboardClient } from './DashboardClient';
|
||||||
|
export { DashboardFilters } from './DashboardFilters';
|
||||||
|
export { DashboardHeader } from './DashboardHeader';
|
||||||
|
export { DashboardProjects } from './DashboardProjects';
|
||||||
|
export { DashboardStats } from './DashboardStats';
|
||||||
|
export { EditProjectDialog } from './EditProjectDialog';
|
||||||
|
export { ProjectMembersDialog } from './ProjectMembersDialog';
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { DashboardClient } from './components/DashboardClient';
|
||||||
|
|
||||||
|
export default function DashboardPage() {
|
||||||
|
return <DashboardClient />;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import { AuthProvider } from '@/context/authContext';
|
||||||
|
import { OrganizationProvider } from '@/context/organizationContext';
|
||||||
|
import { TimerProvider } from '@/context/timerContext';
|
||||||
|
|
||||||
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<OrganizationProvider>
|
||||||
|
<TimerProvider>
|
||||||
|
<Header />
|
||||||
|
{children}
|
||||||
|
</TimerProvider>
|
||||||
|
</OrganizationProvider>
|
||||||
|
</AuthProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
# Organizações - Estrutura de Componentes
|
||||||
|
|
||||||
|
Esta pasta contém a funcionalidade de gerenciamento de organizações, organizada em uma estrutura modular e reutilizável.
|
||||||
|
|
||||||
|
## Estrutura de Arquivos
|
||||||
|
|
||||||
|
```
|
||||||
|
organizations/
|
||||||
|
├── components/
|
||||||
|
│ ├── OrganizationCard.tsx # Card individual de organização
|
||||||
|
│ ├── MembersList.tsx # Lista de membros de uma organização
|
||||||
|
│ ├── AddMemberPopover.tsx # Popover para adicionar membros
|
||||||
|
│ ├── CreateOrganizationDialog.tsx # Modal de criação de organização
|
||||||
|
│ ├── OrganizationsList.tsx # Lista de todas as organizações
|
||||||
|
│ └── index.ts # Exportações dos componentes
|
||||||
|
├── hooks/
|
||||||
|
│ ├── useOrganizations.ts # Hook customizado para gerenciar estado
|
||||||
|
│ └── index.ts # Exportações dos hooks
|
||||||
|
├── page.tsx # Página principal (refatorada)
|
||||||
|
└── README.md # Esta documentação
|
||||||
|
```
|
||||||
|
|
||||||
|
## Componentes
|
||||||
|
|
||||||
|
### OrganizationCard
|
||||||
|
|
||||||
|
Exibe um card individual de organização com:
|
||||||
|
|
||||||
|
- Nome da organização
|
||||||
|
- Lista de membros
|
||||||
|
- Botões de ação (adicionar membro, editar, remover)
|
||||||
|
|
||||||
|
### MembersList
|
||||||
|
|
||||||
|
Gerencia a exibição da lista de membros de uma organização:
|
||||||
|
|
||||||
|
- Estado de carregamento
|
||||||
|
- Lista vazia
|
||||||
|
- Lista com membros e botões de remoção
|
||||||
|
|
||||||
|
### AddMemberPopover
|
||||||
|
|
||||||
|
Popover para adicionar novos membros:
|
||||||
|
|
||||||
|
- Seleção de usuário
|
||||||
|
- Seleção de função (admin/member)
|
||||||
|
- Validações e estados de carregamento
|
||||||
|
|
||||||
|
### CreateOrganizationDialog
|
||||||
|
|
||||||
|
Modal para criação de novas organizações:
|
||||||
|
|
||||||
|
- Formulário com nome e descrição
|
||||||
|
- Validações
|
||||||
|
- Estados de carregamento
|
||||||
|
|
||||||
|
### OrganizationsList
|
||||||
|
|
||||||
|
Container principal que renderiza a lista de organizações:
|
||||||
|
|
||||||
|
- Estado vazio
|
||||||
|
- Lista de cards de organizações
|
||||||
|
|
||||||
|
## Hooks
|
||||||
|
|
||||||
|
### useOrganizations
|
||||||
|
|
||||||
|
Hook customizado que centraliza toda a lógica de estado e operações:
|
||||||
|
|
||||||
|
- Estados de carregamento
|
||||||
|
- Dados das organizações e membros
|
||||||
|
- Funções de CRUD
|
||||||
|
- Gerenciamento de formulários
|
||||||
|
|
||||||
|
## Benefícios da Refatoração
|
||||||
|
|
||||||
|
1. **Separação de Responsabilidades**: Cada componente tem uma responsabilidade específica
|
||||||
|
2. **Reutilização**: Componentes podem ser reutilizados em outras partes da aplicação
|
||||||
|
3. **Manutenibilidade**: Código mais fácil de manter e testar
|
||||||
|
4. **Performance**: Melhor otimização de re-renderizações
|
||||||
|
5. **Legibilidade**: Código mais limpo e organizado
|
||||||
|
|
||||||
|
## Uso
|
||||||
|
|
||||||
|
A página principal (`page.tsx`) agora é muito mais simples e foca apenas na estrutura de layout, delegando toda a lógica para os hooks e componentes especializados.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// Exemplo de uso do hook
|
||||||
|
const {
|
||||||
|
organizations,
|
||||||
|
isLoading,
|
||||||
|
handleCreateOrganization,
|
||||||
|
handleAddMember,
|
||||||
|
// ... outros estados e funções
|
||||||
|
} = useOrganizations();
|
||||||
|
```
|
||||||
|
|
||||||
|
## Próximos Passos
|
||||||
|
|
||||||
|
- Implementar testes unitários para os componentes
|
||||||
|
- Adicionar funcionalidades de edição e remoção de organizações
|
||||||
|
- Implementar cache de dados para melhor performance
|
||||||
|
- Adicionar validações mais robustas
|
||||||
|
|
@ -0,0 +1,239 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/popover';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { User } from '@/types/User';
|
||||||
|
import { Loader2, UserPlusIcon } from 'lucide-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface AddMemberPopoverProps {
|
||||||
|
organizationId: string;
|
||||||
|
onAddMember: (organizationId: string) => Promise<void>;
|
||||||
|
users: User[];
|
||||||
|
isLoadingUsers: boolean;
|
||||||
|
isAddingMember: boolean;
|
||||||
|
selectedUser: string;
|
||||||
|
setSelectedUser: (value: string) => void;
|
||||||
|
selectedRole: 'admin' | 'member';
|
||||||
|
setSelectedRole: (value: 'admin' | 'member') => void;
|
||||||
|
openPopoverId: string | null;
|
||||||
|
setOpenPopoverId: (value: string | null) => void;
|
||||||
|
currentMemberIds: string[];
|
||||||
|
projectCount?: number;
|
||||||
|
emailListChanged: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AddMemberPopover({
|
||||||
|
organizationId,
|
||||||
|
onAddMember,
|
||||||
|
users,
|
||||||
|
isLoadingUsers,
|
||||||
|
isAddingMember,
|
||||||
|
selectedUser,
|
||||||
|
setSelectedUser,
|
||||||
|
selectedRole,
|
||||||
|
setSelectedRole,
|
||||||
|
openPopoverId,
|
||||||
|
setOpenPopoverId,
|
||||||
|
currentMemberIds,
|
||||||
|
projectCount,
|
||||||
|
emailListChanged,
|
||||||
|
}: AddMemberPopoverProps) {
|
||||||
|
const [allowedUsers, setAllowedUsers] = useState<User[]>([]);
|
||||||
|
const [isValidatingEmails, setIsValidatingEmails] = useState(false);
|
||||||
|
|
||||||
|
// Filtrar usuários que têm emails permitidos para esta organização
|
||||||
|
useEffect(() => {
|
||||||
|
const validateUserEmails = async () => {
|
||||||
|
if (users.length === 0) {
|
||||||
|
setAllowedUsers([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsValidatingEmails(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const userIds = users.map((user) => user.id);
|
||||||
|
const response = await fetch('/api/validate-user-emails', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
organizationId,
|
||||||
|
userIds,
|
||||||
|
}),
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
const validUserIds = data.data || [];
|
||||||
|
const validUsers = users.filter((user) =>
|
||||||
|
validUserIds.includes(user.id)
|
||||||
|
);
|
||||||
|
setAllowedUsers(validUsers);
|
||||||
|
} else {
|
||||||
|
console.error('Erro ao validar emails de usuários');
|
||||||
|
setAllowedUsers([]);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao validar emails de usuários:', error);
|
||||||
|
setAllowedUsers([]);
|
||||||
|
} finally {
|
||||||
|
setIsValidatingEmails(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
validateUserEmails();
|
||||||
|
}, [users, organizationId, emailListChanged]);
|
||||||
|
|
||||||
|
// Filtrar usuários que já são membros da organização
|
||||||
|
const availableUsers = allowedUsers.filter(
|
||||||
|
(user) => !currentMemberIds.includes(user.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
open={openPopoverId === organizationId}
|
||||||
|
onOpenChange={(open) => setOpenPopoverId(open ? organizationId : null)}
|
||||||
|
>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<UserPlusIcon className="w-4 h-4 mr-2" />
|
||||||
|
Adicionar Membro
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-80">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h4 className="font-medium leading-none">Adicionar Membro</h4>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Selecione um usuário para adicionar à organização. O membro será
|
||||||
|
automaticamente adicionado a todos os projetos existentes.
|
||||||
|
{projectCount !== undefined && (
|
||||||
|
<span className="block mt-1 text-xs text-blue-600">
|
||||||
|
Esta organização possui {projectCount} projeto
|
||||||
|
{projectCount !== 1 ? 's' : ''}.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="user-select">Usuário:</Label>
|
||||||
|
{isLoadingUsers || isValidatingEmails ? (
|
||||||
|
<div className="flex items-center gap-2 p-3 border rounded-md bg-muted/50">
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{isLoadingUsers
|
||||||
|
? 'Carregando usuários...'
|
||||||
|
: 'Validando emails...'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : availableUsers.length === 0 ? (
|
||||||
|
<div className="p-3 border rounded-md bg-muted/50">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Nenhum usuário disponível para adicionar
|
||||||
|
</span>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Apenas usuários com emails do domínio jurunense.com.br ou
|
||||||
|
emails externos permitidos podem ser adicionados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Select
|
||||||
|
value={selectedUser}
|
||||||
|
onValueChange={setSelectedUser}
|
||||||
|
disabled={isAddingMember}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione um usuário" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{availableUsers.map((user) => (
|
||||||
|
<SelectItem key={user.id} value={user.id}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{user.image && (
|
||||||
|
<img
|
||||||
|
src={user.image}
|
||||||
|
alt={user.name}
|
||||||
|
className="w-4 h-4 rounded-full"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span>{user.name}</span>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
({user.email})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="role-select">Função:</Label>
|
||||||
|
<Select
|
||||||
|
value={selectedRole}
|
||||||
|
onValueChange={(value: 'admin' | 'member') =>
|
||||||
|
setSelectedRole(value)
|
||||||
|
}
|
||||||
|
disabled={isAddingMember}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="member">Membro</SelectItem>
|
||||||
|
<SelectItem value="admin">Administrador</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2 pt-2">
|
||||||
|
<Button
|
||||||
|
onClick={() => onAddMember(organizationId)}
|
||||||
|
disabled={
|
||||||
|
!selectedUser ||
|
||||||
|
isAddingMember ||
|
||||||
|
availableUsers.length === 0 ||
|
||||||
|
isValidatingEmails
|
||||||
|
}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
{isAddingMember ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Adicionando...
|
||||||
|
</>
|
||||||
|
) : isValidatingEmails ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Validando...
|
||||||
|
</>
|
||||||
|
) : availableUsers.length === 0 ? (
|
||||||
|
'Nenhum usuário disponível'
|
||||||
|
) : (
|
||||||
|
'Adicionar a todos os projetos'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { OrganizationAllowedEmailsManager } from '@/components/OrganizationAllowedEmailsManager';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
|
||||||
|
interface AllowedEmailsDialogProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
organizationId: string;
|
||||||
|
organizationName: string;
|
||||||
|
onEmailListChanged?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AllowedEmailsDialog({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
organizationId,
|
||||||
|
organizationName,
|
||||||
|
onEmailListChanged,
|
||||||
|
}: AllowedEmailsDialogProps) {
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
|
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Gerenciar Emails Permitidos</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Configure quais emails externos podem se registrar na organização{' '}
|
||||||
|
<strong>{organizationName}</strong>
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<OrganizationAllowedEmailsManager
|
||||||
|
organizationId={organizationId}
|
||||||
|
organizationName={organizationName}
|
||||||
|
onEmailListChanged={onEmailListChanged}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Loader2, PlusIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
interface CreateOrganizationDialogProps {
|
||||||
|
isDialogOpen: boolean;
|
||||||
|
setIsDialogOpen: (value: boolean) => void;
|
||||||
|
formData: { name: string; description: string };
|
||||||
|
setFormData: (value: { name: string; description: string }) => void;
|
||||||
|
isCreating: boolean;
|
||||||
|
onSubmit: (e: React.FormEvent) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreateOrganizationDialog({
|
||||||
|
isDialogOpen,
|
||||||
|
setIsDialogOpen,
|
||||||
|
formData,
|
||||||
|
setFormData,
|
||||||
|
isCreating,
|
||||||
|
onSubmit,
|
||||||
|
}: CreateOrganizationDialogProps) {
|
||||||
|
return (
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<PlusIcon className="w-4 h-4" />
|
||||||
|
Nova organização
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<form onSubmit={onSubmit}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Criar organização</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 my-4">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label htmlFor="name">Nome:</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Nome da organização"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, name: e.target.value })
|
||||||
|
}
|
||||||
|
disabled={isCreating}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label htmlFor="description">Descrição:</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
name="description"
|
||||||
|
placeholder="Descrição da organização"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, description: e.target.value })
|
||||||
|
}
|
||||||
|
disabled={isCreating}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" disabled={isCreating}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isCreating || !formData.name.trim()}
|
||||||
|
>
|
||||||
|
{isCreating ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Criando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Criar organização'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { OrganizationMember } from '@/types/User';
|
||||||
|
import { Loader2, TrashIcon } from 'lucide-react';
|
||||||
|
import { RoleSelector } from './RoleSelector';
|
||||||
|
|
||||||
|
interface MembersListProps {
|
||||||
|
members: OrganizationMember[];
|
||||||
|
isLoadingMembers: boolean;
|
||||||
|
organizationId: string;
|
||||||
|
currentUserRole?: 'owner' | 'admin' | 'member';
|
||||||
|
onRemoveMember: (organizationId: string, memberId: string) => Promise<void>;
|
||||||
|
onRoleChange: (
|
||||||
|
memberId: string,
|
||||||
|
newRole: 'admin' | 'member'
|
||||||
|
) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MembersList({
|
||||||
|
members,
|
||||||
|
isLoadingMembers,
|
||||||
|
organizationId,
|
||||||
|
currentUserRole,
|
||||||
|
onRemoveMember,
|
||||||
|
onRoleChange,
|
||||||
|
}: MembersListProps) {
|
||||||
|
if (isLoadingMembers) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Carregando membros...
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (members.length === 0) {
|
||||||
|
return (
|
||||||
|
<p className="text-sm text-muted-foreground">Nenhum membro encontrado</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{members.map((member) => {
|
||||||
|
const canEditRole =
|
||||||
|
currentUserRole === 'owner' || currentUserRole === 'admin';
|
||||||
|
const canRemoveMember =
|
||||||
|
currentUserRole === 'owner' ||
|
||||||
|
(currentUserRole === 'admin' && member.role !== 'owner');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={member.id}
|
||||||
|
className="flex items-center justify-between p-2 bg-muted/50 rounded"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="font-medium">
|
||||||
|
{member.user?.name || 'Usuário sem nome'}
|
||||||
|
</span>
|
||||||
|
<RoleSelector
|
||||||
|
currentRole={member.role}
|
||||||
|
memberId={member.userId}
|
||||||
|
canEdit={canEditRole}
|
||||||
|
onRoleChange={onRoleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{canRemoveMember && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => onRemoveMember(organizationId, member.id)}
|
||||||
|
className="h-6 w-6"
|
||||||
|
>
|
||||||
|
<TrashIcon className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,346 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/components/ui/card';
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { Organization, OrganizationMember, User } from '@/types/User';
|
||||||
|
import { Loader2, Mail, PencilIcon, TrashIcon } from 'lucide-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { AddMemberPopover } from './AddMemberPopover';
|
||||||
|
import { MembersList } from './MembersList';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
|
interface OrganizationCardProps {
|
||||||
|
organization: Organization;
|
||||||
|
members: OrganizationMember[];
|
||||||
|
projectCount: number;
|
||||||
|
isLoadingMembers: boolean;
|
||||||
|
onRemoveMember: (organizationId: string, memberId: string) => Promise<void>;
|
||||||
|
onAddMember: (organizationId: string) => Promise<void>;
|
||||||
|
onRemoveOrganization: (organizationId: string) => Promise<boolean>;
|
||||||
|
onUpdateOrganization: (
|
||||||
|
organizationId: string,
|
||||||
|
name: string,
|
||||||
|
description: string
|
||||||
|
) => Promise<boolean>;
|
||||||
|
onOpenAllowedEmailsDialog: (
|
||||||
|
organizationId: string,
|
||||||
|
organizationName: string
|
||||||
|
) => void;
|
||||||
|
onRoleChange: (
|
||||||
|
memberId: string,
|
||||||
|
newRole: 'admin' | 'member'
|
||||||
|
) => Promise<void>;
|
||||||
|
users: User[];
|
||||||
|
isLoadingUsers: boolean;
|
||||||
|
isAddingMember: boolean;
|
||||||
|
selectedUser: string;
|
||||||
|
setSelectedUser: (value: string) => void;
|
||||||
|
selectedRole: 'admin' | 'member';
|
||||||
|
setSelectedRole: (value: 'admin' | 'member') => void;
|
||||||
|
openPopoverId: string | null;
|
||||||
|
setOpenPopoverId: (value: string | null) => void;
|
||||||
|
emailListChanged: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OrganizationCard({
|
||||||
|
organization,
|
||||||
|
members,
|
||||||
|
projectCount,
|
||||||
|
isLoadingMembers,
|
||||||
|
onRemoveMember,
|
||||||
|
onAddMember,
|
||||||
|
onRemoveOrganization,
|
||||||
|
onUpdateOrganization,
|
||||||
|
onOpenAllowedEmailsDialog,
|
||||||
|
onRoleChange,
|
||||||
|
users,
|
||||||
|
isLoadingUsers,
|
||||||
|
isAddingMember,
|
||||||
|
selectedUser,
|
||||||
|
setSelectedUser,
|
||||||
|
selectedRole,
|
||||||
|
setSelectedRole,
|
||||||
|
openPopoverId,
|
||||||
|
setOpenPopoverId,
|
||||||
|
emailListChanged,
|
||||||
|
}: OrganizationCardProps) {
|
||||||
|
const [organizationName, setOrganizationName] = useState('');
|
||||||
|
const [isRemovingOrganization, setIsRemovingOrganization] = useState(false);
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||||
|
const [editName, setEditName] = useState(organization.name);
|
||||||
|
const [editDescription, setEditDescription] = useState(
|
||||||
|
organization.description || ''
|
||||||
|
);
|
||||||
|
const [isUpdatingOrganization, setIsUpdatingOrganization] = useState(false);
|
||||||
|
const [currentUserId, setCurrentUserId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Obter o ID do usuário atual
|
||||||
|
useEffect(() => {
|
||||||
|
const getCurrentUser = async () => {
|
||||||
|
try {
|
||||||
|
const session = await authClient.getSession();
|
||||||
|
if (session?.data?.user?.id) {
|
||||||
|
setCurrentUserId(session.data.user.id);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao obter usuário atual:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getCurrentUser();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Verificar se o usuário atual é admin ou owner
|
||||||
|
const currentUser = members.find((member) => member.userId === currentUserId);
|
||||||
|
const canRemoveOrganization =
|
||||||
|
currentUser && ['owner', 'admin'].includes(currentUser.role);
|
||||||
|
|
||||||
|
const handleRemoveOrganization = async () => {
|
||||||
|
if (organizationName !== organization.name) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsRemovingOrganization(true);
|
||||||
|
try {
|
||||||
|
const success = await onRemoveOrganization(organization.id);
|
||||||
|
if (success) {
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
setOrganizationName('');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsRemovingOrganization(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateOrganization = async () => {
|
||||||
|
if (!editName.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsUpdatingOrganization(true);
|
||||||
|
try {
|
||||||
|
const success = await onUpdateOrganization(
|
||||||
|
organization.id,
|
||||||
|
editName.trim(),
|
||||||
|
editDescription.trim()
|
||||||
|
);
|
||||||
|
if (success) {
|
||||||
|
setIsEditDialogOpen(false);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsUpdatingOrganization(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Atualizar estados quando a organização mudar
|
||||||
|
useEffect(() => {
|
||||||
|
setEditName(organization.name);
|
||||||
|
setEditDescription(organization.description || '');
|
||||||
|
}, [organization.name, organization.description]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="w-full">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{organization.name}</CardTitle>
|
||||||
|
<CardDescription>{organization.description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h2 className="text-sm font-bold">Membros</h2>
|
||||||
|
<AddMemberPopover
|
||||||
|
organizationId={organization.id}
|
||||||
|
onAddMember={onAddMember}
|
||||||
|
users={users}
|
||||||
|
isLoadingUsers={isLoadingUsers}
|
||||||
|
isAddingMember={isAddingMember}
|
||||||
|
selectedUser={selectedUser}
|
||||||
|
setSelectedUser={setSelectedUser}
|
||||||
|
selectedRole={selectedRole}
|
||||||
|
setSelectedRole={setSelectedRole}
|
||||||
|
openPopoverId={openPopoverId}
|
||||||
|
setOpenPopoverId={setOpenPopoverId}
|
||||||
|
currentMemberIds={members.map((member) => member.userId)}
|
||||||
|
projectCount={projectCount}
|
||||||
|
emailListChanged={emailListChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<MembersList
|
||||||
|
members={members}
|
||||||
|
isLoadingMembers={isLoadingMembers}
|
||||||
|
organizationId={organization.id}
|
||||||
|
currentUserRole={
|
||||||
|
members.find((m) => m.userId === currentUserId)?.role
|
||||||
|
}
|
||||||
|
onRemoveMember={onRemoveMember}
|
||||||
|
onRoleChange={onRoleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
onOpenAllowedEmailsDialog(organization.id, organization.name)
|
||||||
|
}
|
||||||
|
title="Gerenciar emails permitidos para esta organização"
|
||||||
|
>
|
||||||
|
<Mail className="w-4 h-4" /> Emails Permitidos
|
||||||
|
</Button>
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
disabled={!canRemoveOrganization}
|
||||||
|
title={
|
||||||
|
!canRemoveOrganization
|
||||||
|
? 'Apenas owners e admins podem remover organizações'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<TrashIcon className="w-4 h-4" /> Remover
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Remover organização</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Esta ação não pode ser desfeita. Para confirmar a remoção da
|
||||||
|
organização, digite o nome exato:{' '}
|
||||||
|
<strong>{organization.name}</strong>
|
||||||
|
</p>
|
||||||
|
<Label htmlFor="organization-name">Nome da organização:</Label>
|
||||||
|
<Input
|
||||||
|
id="organization-name"
|
||||||
|
type="text"
|
||||||
|
className="w-full"
|
||||||
|
value={organizationName}
|
||||||
|
onChange={(e) => {
|
||||||
|
setOrganizationName(e.target.value);
|
||||||
|
}}
|
||||||
|
placeholder="Digite o nome da organização"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
disabled={
|
||||||
|
organizationName !== organization.name ||
|
||||||
|
isRemovingOrganization
|
||||||
|
}
|
||||||
|
onClick={handleRemoveOrganization}
|
||||||
|
>
|
||||||
|
{isRemovingOrganization ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Removendo...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Remover'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={!canRemoveOrganization}
|
||||||
|
title={
|
||||||
|
!canRemoveOrganization
|
||||||
|
? 'Apenas owners e admins podem editar organizações'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<PencilIcon className="w-4 h-4" /> Editar
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Editar organização</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="edit-name">Nome da organização:</Label>
|
||||||
|
<Input
|
||||||
|
id="edit-name"
|
||||||
|
type="text"
|
||||||
|
value={editName}
|
||||||
|
onChange={(e) => setEditName(e.target.value)}
|
||||||
|
placeholder="Digite o nome da organização"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="edit-description">
|
||||||
|
Descrição (opcional):
|
||||||
|
</Label>
|
||||||
|
<textarea
|
||||||
|
id="edit-description"
|
||||||
|
className="w-full min-h-[80px] p-3 border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 rounded-md resize-none"
|
||||||
|
value={editDescription}
|
||||||
|
onChange={(e) => setEditDescription(e.target.value)}
|
||||||
|
placeholder="Digite uma descrição para a organização"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="default"
|
||||||
|
size="sm"
|
||||||
|
disabled={!editName.trim() || isUpdatingOrganization}
|
||||||
|
onClick={handleUpdateOrganization}
|
||||||
|
>
|
||||||
|
{isUpdatingOrganization ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Salvando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Salvar'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Organization, OrganizationMember, User } from '@/types/User';
|
||||||
|
import { OrganizationCard } from './OrganizationCard';
|
||||||
|
|
||||||
|
interface OrganizationsListProps {
|
||||||
|
organizations: Organization[];
|
||||||
|
organizationMembers: Record<string, OrganizationMember[]>;
|
||||||
|
organizationProjectCounts: Record<string, number>;
|
||||||
|
isLoadingMembers: Record<string, boolean>;
|
||||||
|
onRemoveMember: (organizationId: string, memberId: string) => Promise<void>;
|
||||||
|
onAddMember: (organizationId: string) => Promise<void>;
|
||||||
|
onRemoveOrganization: (organizationId: string) => Promise<boolean>;
|
||||||
|
onUpdateOrganization: (
|
||||||
|
organizationId: string,
|
||||||
|
name: string,
|
||||||
|
description: string
|
||||||
|
) => Promise<boolean>;
|
||||||
|
onOpenAllowedEmailsDialog: (
|
||||||
|
organizationId: string,
|
||||||
|
organizationName: string
|
||||||
|
) => void;
|
||||||
|
onRoleChange: (
|
||||||
|
memberId: string,
|
||||||
|
newRole: 'admin' | 'member'
|
||||||
|
) => Promise<void>;
|
||||||
|
users: User[];
|
||||||
|
isLoadingUsers: boolean;
|
||||||
|
isAddingMember: boolean;
|
||||||
|
selectedUser: string;
|
||||||
|
setSelectedUser: (value: string) => void;
|
||||||
|
selectedRole: 'admin' | 'member';
|
||||||
|
setSelectedRole: (value: 'admin' | 'member') => void;
|
||||||
|
openPopoverId: string | null;
|
||||||
|
setOpenPopoverId: (value: string | null) => void;
|
||||||
|
emailListChanged: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OrganizationsList({
|
||||||
|
organizations,
|
||||||
|
organizationMembers,
|
||||||
|
organizationProjectCounts,
|
||||||
|
isLoadingMembers,
|
||||||
|
onRemoveMember,
|
||||||
|
onAddMember,
|
||||||
|
onRemoveOrganization,
|
||||||
|
onUpdateOrganization,
|
||||||
|
onOpenAllowedEmailsDialog,
|
||||||
|
onRoleChange,
|
||||||
|
users,
|
||||||
|
isLoadingUsers,
|
||||||
|
isAddingMember,
|
||||||
|
selectedUser,
|
||||||
|
setSelectedUser,
|
||||||
|
selectedRole,
|
||||||
|
setSelectedRole,
|
||||||
|
openPopoverId,
|
||||||
|
setOpenPopoverId,
|
||||||
|
emailListChanged,
|
||||||
|
}: OrganizationsListProps) {
|
||||||
|
if (organizations.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="w-full text-center py-8 text-muted-foreground">
|
||||||
|
Nenhuma organização encontrada. Crie sua primeira organização!
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-3 w-full">
|
||||||
|
{organizations.map((organization) => (
|
||||||
|
<OrganizationCard
|
||||||
|
key={organization.id}
|
||||||
|
organization={organization}
|
||||||
|
members={organizationMembers[organization.id] || []}
|
||||||
|
projectCount={organizationProjectCounts[organization.id] || 0}
|
||||||
|
isLoadingMembers={isLoadingMembers[organization.id] || false}
|
||||||
|
onRemoveMember={onRemoveMember}
|
||||||
|
onAddMember={onAddMember}
|
||||||
|
onRemoveOrganization={onRemoveOrganization}
|
||||||
|
onUpdateOrganization={onUpdateOrganization}
|
||||||
|
onOpenAllowedEmailsDialog={onOpenAllowedEmailsDialog}
|
||||||
|
onRoleChange={onRoleChange}
|
||||||
|
users={users}
|
||||||
|
isLoadingUsers={isLoadingUsers}
|
||||||
|
isAddingMember={isAddingMember}
|
||||||
|
selectedUser={selectedUser}
|
||||||
|
setSelectedUser={setSelectedUser}
|
||||||
|
selectedRole={selectedRole}
|
||||||
|
setSelectedRole={setSelectedRole}
|
||||||
|
openPopoverId={openPopoverId}
|
||||||
|
setOpenPopoverId={setOpenPopoverId}
|
||||||
|
emailListChanged={emailListChanged}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import { ChevronDown, Crown, Shield, User } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
interface RoleSelectorProps {
|
||||||
|
currentRole: 'owner' | 'admin' | 'member';
|
||||||
|
memberId: string;
|
||||||
|
canEdit: boolean;
|
||||||
|
onRoleChange: (
|
||||||
|
memberId: string,
|
||||||
|
newRole: 'admin' | 'member'
|
||||||
|
) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const roleConfig = {
|
||||||
|
owner: {
|
||||||
|
label: 'Owner',
|
||||||
|
icon: Crown,
|
||||||
|
color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
||||||
|
description: 'Controle total da organização',
|
||||||
|
},
|
||||||
|
admin: {
|
||||||
|
label: 'Admin',
|
||||||
|
icon: Shield,
|
||||||
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
||||||
|
description: 'Pode gerenciar membros e projetos',
|
||||||
|
},
|
||||||
|
member: {
|
||||||
|
label: 'Member',
|
||||||
|
icon: User,
|
||||||
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
||||||
|
description: 'Acesso básico à organização',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export function RoleSelector({
|
||||||
|
currentRole,
|
||||||
|
memberId,
|
||||||
|
canEdit,
|
||||||
|
onRoleChange,
|
||||||
|
}: RoleSelectorProps) {
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const config = roleConfig[currentRole];
|
||||||
|
const Icon = config.icon;
|
||||||
|
|
||||||
|
const handleRoleChange = async (newRole: 'admin' | 'member') => {
|
||||||
|
if (!canEdit || newRole === currentRole) return;
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
await onRoleChange(memberId, newRole);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao alterar role:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!canEdit) {
|
||||||
|
return (
|
||||||
|
<Badge className={`${config.color} flex items-center gap-1`}>
|
||||||
|
<Icon className="h-3 w-3" />
|
||||||
|
{config.label}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className={`${config.color} hover:opacity-80 flex items-center gap-1`}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
<Icon className="h-3 w-3" />
|
||||||
|
{config.label}
|
||||||
|
<ChevronDown className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||||
|
Alterar role para:
|
||||||
|
</div>
|
||||||
|
{currentRole !== 'owner' && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => handleRoleChange('admin')}
|
||||||
|
disabled={isLoading || currentRole === 'admin'}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<Shield className="h-4 w-4" />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">Admin</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
Pode gerenciar membros e projetos
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => handleRoleChange('member')}
|
||||||
|
disabled={isLoading || currentRole === 'member'}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<User className="h-4 w-4" />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">Member</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
Acesso básico à organização
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{currentRole === 'owner' && (
|
||||||
|
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||||
|
Owners não podem ter seu role alterado
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
export { AddMemberPopover } from './AddMemberPopover';
|
||||||
|
export { AllowedEmailsDialog } from './AllowedEmailsDialog';
|
||||||
|
export { CreateOrganizationDialog } from './CreateOrganizationDialog';
|
||||||
|
export { MembersList } from './MembersList';
|
||||||
|
export { OrganizationCard } from './OrganizationCard';
|
||||||
|
export { OrganizationsList } from './OrganizationsList';
|
||||||
|
export { RoleSelector } from './RoleSelector';
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { useOrganizations } from './useOrganizations';
|
||||||
|
|
@ -0,0 +1,512 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Organization, OrganizationMember, User } from '@/types/User';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
export function useOrganizations() {
|
||||||
|
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||||
|
const [organizationMembers, setOrganizationMembers] = useState<
|
||||||
|
Record<string, OrganizationMember[]>
|
||||||
|
>({});
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isLoadingMembers, setIsLoadingMembers] = useState<
|
||||||
|
Record<string, boolean>
|
||||||
|
>({});
|
||||||
|
const [isCreating, setIsCreating] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [formData, setFormData] = useState({ name: '', description: '' });
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
// Estados para adicionar membros
|
||||||
|
const [users, setUsers] = useState<User[]>([]);
|
||||||
|
const [isLoadingUsers, setIsLoadingUsers] = useState(false);
|
||||||
|
const [selectedUser, setSelectedUser] = useState<string>('');
|
||||||
|
const [selectedRole, setSelectedRole] = useState<'admin' | 'member'>(
|
||||||
|
'member'
|
||||||
|
);
|
||||||
|
const [isAddingMember, setIsAddingMember] = useState(false);
|
||||||
|
const [openPopoverId, setOpenPopoverId] = useState<string | null>(null);
|
||||||
|
const [organizationProjectCounts, setOrganizationProjectCounts] = useState<
|
||||||
|
Record<string, number>
|
||||||
|
>({});
|
||||||
|
|
||||||
|
// Estados para gerenciar emails permitidos
|
||||||
|
const [isAllowedEmailsDialogOpen, setIsAllowedEmailsDialogOpen] =
|
||||||
|
useState(false);
|
||||||
|
const [selectedOrganizationForEmails, setSelectedOrganizationForEmails] =
|
||||||
|
useState<{
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
} | null>(null);
|
||||||
|
const [emailListChanged, setEmailListChanged] = useState(0);
|
||||||
|
|
||||||
|
const loadOrganizations = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const response = await fetch('/api/organizations', {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
const orgs = data.data || [];
|
||||||
|
setOrganizations(orgs);
|
||||||
|
|
||||||
|
// Carregar membros para cada organização
|
||||||
|
await loadMembersForOrganizations(orgs);
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
setError('Erro ao carregar organizações');
|
||||||
|
toast.error(
|
||||||
|
`Erro ao carregar organizações: ${errorData.error || response.status}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setError('Erro ao carregar organizações');
|
||||||
|
toast.error('Erro ao carregar organizações');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMembersForOrganizations = async (orgs: Organization[]) => {
|
||||||
|
const membersData: Record<string, OrganizationMember[]> = {};
|
||||||
|
const loadingData: Record<string, boolean> = {};
|
||||||
|
const projectCounts: Record<string, number> = {};
|
||||||
|
|
||||||
|
for (const org of orgs) {
|
||||||
|
loadingData[org.id] = true;
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/organizations/${org.id}/members`, {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
membersData[org.id] = data.data || [];
|
||||||
|
} else {
|
||||||
|
console.error(`Erro ao carregar membros da organização ${org.id}`);
|
||||||
|
membersData[org.id] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar número de projetos da organização
|
||||||
|
try {
|
||||||
|
const projectResponse = await fetch(
|
||||||
|
`/api/getProject?organizationId=${org.id}`,
|
||||||
|
{
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (projectResponse.ok) {
|
||||||
|
const projectData = await projectResponse.json();
|
||||||
|
projectCounts[org.id] = projectData.data?.length || 0;
|
||||||
|
} else {
|
||||||
|
projectCounts[org.id] = 0;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
`Erro ao carregar projetos da organização ${org.id}:`,
|
||||||
|
error
|
||||||
|
);
|
||||||
|
projectCounts[org.id] = 0;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
`Erro ao carregar membros da organização ${org.id}:`,
|
||||||
|
error
|
||||||
|
);
|
||||||
|
membersData[org.id] = [];
|
||||||
|
projectCounts[org.id] = 0;
|
||||||
|
} finally {
|
||||||
|
loadingData[org.id] = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setOrganizationMembers(membersData);
|
||||||
|
setIsLoadingMembers(loadingData);
|
||||||
|
setOrganizationProjectCounts(projectCounts);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveMember = async (
|
||||||
|
organizationId: string,
|
||||||
|
memberId: string
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members?memberId=${memberId}`,
|
||||||
|
{
|
||||||
|
method: 'DELETE',
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
// Recarregar membros da organização para garantir dados atualizados
|
||||||
|
const memberResponse = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members`,
|
||||||
|
{
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (memberResponse.ok) {
|
||||||
|
const memberData = await memberResponse.json();
|
||||||
|
setOrganizationMembers((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[organizationId]: memberData.data || [],
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success('Membro removido com sucesso!');
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
toast.error(errorData.error || 'Erro ao remover membro');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Erro ao remover membro');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveOrganization = async (organizationId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/organizations/${organizationId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
// Remover a organização da lista local
|
||||||
|
setOrganizations((prev) =>
|
||||||
|
prev.filter((org) => org.id !== organizationId)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Remover membros da organização da lista local
|
||||||
|
setOrganizationMembers((prev) => {
|
||||||
|
const newMembers = { ...prev };
|
||||||
|
delete newMembers[organizationId];
|
||||||
|
return newMembers;
|
||||||
|
});
|
||||||
|
|
||||||
|
toast.success('Organização removida com sucesso!');
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
toast.error(errorData.error || 'Erro ao remover organização');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Erro ao remover organização');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateOrganization = async (
|
||||||
|
organizationId: string,
|
||||||
|
name: string,
|
||||||
|
description: string
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/organizations/${organizationId}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify({ name, description }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Atualizar a organização na lista local
|
||||||
|
setOrganizations((prev) =>
|
||||||
|
prev.map((org) =>
|
||||||
|
org.id === organizationId
|
||||||
|
? {
|
||||||
|
...org,
|
||||||
|
name: data.data.name,
|
||||||
|
description: data.data.description,
|
||||||
|
}
|
||||||
|
: org
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
toast.success('Organização atualizada com sucesso!');
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
toast.error(errorData.error || 'Erro ao atualizar organização');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Erro ao atualizar organização');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddMember = async (organizationId: string) => {
|
||||||
|
if (!selectedUser) {
|
||||||
|
toast.error('Selecione um usuário');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário já é membro
|
||||||
|
const isAlreadyMember = organizationMembers[organizationId]?.some(
|
||||||
|
(member) => member.userId === selectedUser
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isAlreadyMember) {
|
||||||
|
toast.error('Este usuário já é membro da organização');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsAddingMember(true);
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members`,
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify({
|
||||||
|
userId: selectedUser,
|
||||||
|
role: selectedRole,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Buscar dados do usuário adicionado
|
||||||
|
const addedUser = users.find((user) => user.id === selectedUser);
|
||||||
|
|
||||||
|
// Criar objeto do membro com dados do usuário
|
||||||
|
const newMember = {
|
||||||
|
...data.data,
|
||||||
|
user: addedUser,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mostrar mensagem com informações sobre os projetos
|
||||||
|
const projectCount = data.projectCount || 0;
|
||||||
|
const projectsAdded = data.projectsAdded || 0;
|
||||||
|
|
||||||
|
// Recarregar membros da organização para garantir dados atualizados
|
||||||
|
const memberResponse = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members`,
|
||||||
|
{
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (memberResponse.ok) {
|
||||||
|
const memberData = await memberResponse.json();
|
||||||
|
setOrganizationMembers((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[organizationId]: memberData.data || [],
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Limpar seleções e fechar popover
|
||||||
|
setSelectedUser('');
|
||||||
|
setSelectedRole('member');
|
||||||
|
setOpenPopoverId(null);
|
||||||
|
|
||||||
|
if (projectCount > 0) {
|
||||||
|
toast.success(
|
||||||
|
`Membro adicionado com sucesso! O usuário foi adicionado a ${projectsAdded} de ${projectCount} projetos da organização.`
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toast.success(
|
||||||
|
'Membro adicionado com sucesso! A organização não possui projetos ainda.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
toast.error(errorData.error || 'Erro ao adicionar membro');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Erro ao adicionar membro');
|
||||||
|
} finally {
|
||||||
|
setIsAddingMember(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadUsers = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoadingUsers(true);
|
||||||
|
const response = await fetch('/api/users', {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setUsers(data.data || []);
|
||||||
|
} else {
|
||||||
|
console.error('Erro ao carregar usuários');
|
||||||
|
toast.error('Erro ao carregar lista de usuários');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao carregar usuários:', error);
|
||||||
|
toast.error('Erro ao carregar lista de usuários');
|
||||||
|
} finally {
|
||||||
|
setIsLoadingUsers(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateOrganization = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
toast.error('Nome da organização é obrigatório');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsCreating(true);
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
name: formData.name.trim(),
|
||||||
|
slug: formData.name.toLowerCase().replace(/[^a-z0-9]/g, '-'),
|
||||||
|
description: formData.description.trim(),
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch('/api/organizations', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setOrganizations([...organizations, data.data]);
|
||||||
|
setFormData({ name: '', description: '' });
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
toast.success('Organização criada com sucesso!');
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
toast.error(errorData.error || 'Erro ao criar organização');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Erro ao criar organização');
|
||||||
|
} finally {
|
||||||
|
setIsCreating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenAllowedEmailsDialog = (
|
||||||
|
organizationId: string,
|
||||||
|
organizationName: string
|
||||||
|
) => {
|
||||||
|
setSelectedOrganizationForEmails({
|
||||||
|
id: organizationId,
|
||||||
|
name: organizationName,
|
||||||
|
});
|
||||||
|
setIsAllowedEmailsDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseAllowedEmailsDialog = () => {
|
||||||
|
setIsAllowedEmailsDialogOpen(false);
|
||||||
|
setSelectedOrganizationForEmails(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEmailListChanged = () => {
|
||||||
|
// Incrementar o contador para forçar o reload da validação de emails
|
||||||
|
setEmailListChanged((prev) => prev + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRoleChange = async (
|
||||||
|
memberId: string,
|
||||||
|
newRole: 'admin' | 'member'
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
// Encontrar a organização do membro
|
||||||
|
const organizationId = Object.keys(organizationMembers).find((orgId) =>
|
||||||
|
organizationMembers[orgId].some((member) => member.userId === memberId)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!organizationId) {
|
||||||
|
toast.error('Organização não encontrada');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members/${memberId}/role`,
|
||||||
|
{
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ role: newRole }),
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
toast.success(data.message);
|
||||||
|
// Recarregar os membros da organização
|
||||||
|
await loadMembersForOrganizations(organizations);
|
||||||
|
} else {
|
||||||
|
toast.error(data.error || 'Erro ao alterar role do membro');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao alterar role do membro:', error);
|
||||||
|
toast.error('Erro ao alterar role do membro');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadOrganizations();
|
||||||
|
loadUsers();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Estados
|
||||||
|
organizations,
|
||||||
|
organizationMembers,
|
||||||
|
organizationProjectCounts,
|
||||||
|
isLoading,
|
||||||
|
isLoadingMembers,
|
||||||
|
isCreating,
|
||||||
|
error,
|
||||||
|
formData,
|
||||||
|
isDialogOpen,
|
||||||
|
users,
|
||||||
|
isLoadingUsers,
|
||||||
|
selectedUser,
|
||||||
|
selectedRole,
|
||||||
|
isAddingMember,
|
||||||
|
openPopoverId,
|
||||||
|
isAllowedEmailsDialogOpen,
|
||||||
|
selectedOrganizationForEmails,
|
||||||
|
emailListChanged,
|
||||||
|
|
||||||
|
// Setters
|
||||||
|
setFormData,
|
||||||
|
setIsDialogOpen,
|
||||||
|
setSelectedUser,
|
||||||
|
setSelectedRole,
|
||||||
|
setOpenPopoverId,
|
||||||
|
|
||||||
|
// Funções
|
||||||
|
handleCreateOrganization,
|
||||||
|
handleAddMember,
|
||||||
|
handleRemoveMember,
|
||||||
|
handleRemoveOrganization,
|
||||||
|
handleUpdateOrganization,
|
||||||
|
handleOpenAllowedEmailsDialog,
|
||||||
|
handleCloseAllowedEmailsDialog,
|
||||||
|
handleEmailListChanged,
|
||||||
|
handleRoleChange,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import Loading from '@/components/Loading';
|
||||||
|
import {
|
||||||
|
ResizableHandle,
|
||||||
|
ResizablePanel,
|
||||||
|
ResizablePanelGroup,
|
||||||
|
} from '@/components/ui/resizable';
|
||||||
|
import {
|
||||||
|
AllowedEmailsDialog,
|
||||||
|
CreateOrganizationDialog,
|
||||||
|
OrganizationsList,
|
||||||
|
} from './components';
|
||||||
|
import { useOrganizations } from './hooks';
|
||||||
|
|
||||||
|
export default function Organizations() {
|
||||||
|
const {
|
||||||
|
// Estados
|
||||||
|
organizations,
|
||||||
|
organizationMembers,
|
||||||
|
organizationProjectCounts,
|
||||||
|
isLoading,
|
||||||
|
isLoadingMembers,
|
||||||
|
isCreating,
|
||||||
|
formData,
|
||||||
|
isDialogOpen,
|
||||||
|
users,
|
||||||
|
isLoadingUsers,
|
||||||
|
selectedUser,
|
||||||
|
selectedRole,
|
||||||
|
isAddingMember,
|
||||||
|
openPopoverId,
|
||||||
|
isAllowedEmailsDialogOpen,
|
||||||
|
selectedOrganizationForEmails,
|
||||||
|
emailListChanged,
|
||||||
|
|
||||||
|
// Setters
|
||||||
|
setFormData,
|
||||||
|
setIsDialogOpen,
|
||||||
|
setSelectedUser,
|
||||||
|
setSelectedRole,
|
||||||
|
setOpenPopoverId,
|
||||||
|
|
||||||
|
// Funções
|
||||||
|
handleCreateOrganization,
|
||||||
|
handleAddMember,
|
||||||
|
handleRemoveMember,
|
||||||
|
handleRemoveOrganization,
|
||||||
|
handleUpdateOrganization,
|
||||||
|
handleOpenAllowedEmailsDialog,
|
||||||
|
handleCloseAllowedEmailsDialog,
|
||||||
|
handleEmailListChanged,
|
||||||
|
handleRoleChange,
|
||||||
|
} = useOrganizations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-[calc(100dvh-4.375rem)]">
|
||||||
|
<ResizablePanelGroup
|
||||||
|
direction="horizontal"
|
||||||
|
className="h-[calc(100dvh-4.375rem)]"
|
||||||
|
>
|
||||||
|
<ResizablePanel defaultSize={20}>
|
||||||
|
<div className="flex flex-col gap-2 justify-start items-center">
|
||||||
|
<h1 className="text-2xl font-bold">Organizações</h1>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<CreateOrganizationDialog
|
||||||
|
isDialogOpen={isDialogOpen}
|
||||||
|
setIsDialogOpen={setIsDialogOpen}
|
||||||
|
formData={formData}
|
||||||
|
setFormData={setFormData}
|
||||||
|
isCreating={isCreating}
|
||||||
|
onSubmit={handleCreateOrganization}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ResizablePanel>
|
||||||
|
<ResizableHandle withHandle />
|
||||||
|
{isLoading ? (
|
||||||
|
<ResizablePanel defaultSize={80}>
|
||||||
|
<Loading />
|
||||||
|
</ResizablePanel>
|
||||||
|
) : (
|
||||||
|
<ResizablePanel defaultSize={80}>
|
||||||
|
<div className="flex flex-col gap-3 justify-start items-start px-4 pt-2 pb-4 h-[calc(100dvh-4.375rem)] overflow-y-auto">
|
||||||
|
<h1 className="text-2xl font-bold">Organizações</h1>
|
||||||
|
<OrganizationsList
|
||||||
|
organizations={organizations}
|
||||||
|
organizationMembers={organizationMembers}
|
||||||
|
organizationProjectCounts={organizationProjectCounts}
|
||||||
|
isLoadingMembers={isLoadingMembers}
|
||||||
|
onRemoveMember={handleRemoveMember}
|
||||||
|
onAddMember={handleAddMember}
|
||||||
|
onRemoveOrganization={handleRemoveOrganization}
|
||||||
|
onUpdateOrganization={handleUpdateOrganization}
|
||||||
|
onOpenAllowedEmailsDialog={handleOpenAllowedEmailsDialog}
|
||||||
|
onRoleChange={handleRoleChange}
|
||||||
|
users={users}
|
||||||
|
isLoadingUsers={isLoadingUsers}
|
||||||
|
isAddingMember={isAddingMember}
|
||||||
|
selectedUser={selectedUser}
|
||||||
|
setSelectedUser={setSelectedUser}
|
||||||
|
selectedRole={selectedRole}
|
||||||
|
setSelectedRole={setSelectedRole}
|
||||||
|
openPopoverId={openPopoverId}
|
||||||
|
setOpenPopoverId={setOpenPopoverId}
|
||||||
|
emailListChanged={emailListChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ResizablePanel>
|
||||||
|
)}
|
||||||
|
</ResizablePanelGroup>
|
||||||
|
|
||||||
|
{/* Diálogo para gerenciar emails permitidos */}
|
||||||
|
{selectedOrganizationForEmails && (
|
||||||
|
<AllowedEmailsDialog
|
||||||
|
isOpen={isAllowedEmailsDialogOpen}
|
||||||
|
onClose={handleCloseAllowedEmailsDialog}
|
||||||
|
organizationId={selectedOrganizationForEmails.id}
|
||||||
|
organizationName={selectedOrganizationForEmails.name}
|
||||||
|
onEmailListChanged={handleEmailListChanged}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,769 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from '@/components/ui/alert-dialog';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { formatTimeSpent } from '@/utils/timeUtils';
|
||||||
|
import { Trash2 } from 'lucide-react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
interface TimeSpentRecord {
|
||||||
|
id: string;
|
||||||
|
timeSpent: number;
|
||||||
|
createdAt: string;
|
||||||
|
userId: string;
|
||||||
|
userName: string;
|
||||||
|
userEmail: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CardComment {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
userId: string;
|
||||||
|
userName: string;
|
||||||
|
userEmail: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CardEditDialogProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
card: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
order: number;
|
||||||
|
} | null;
|
||||||
|
onSave: (updatedCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
isManualTimeAddition?: boolean;
|
||||||
|
}) => Promise<void>;
|
||||||
|
isSaving?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusOptions = [
|
||||||
|
{ value: 'A fazer', label: 'A fazer' },
|
||||||
|
{ value: 'Em progresso', label: 'Em progresso' },
|
||||||
|
{ value: 'Em revisão', label: 'Em revisão' },
|
||||||
|
{ value: 'Testando', label: 'Testando' },
|
||||||
|
{ value: 'Concluido', label: 'Concluído' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function CardEditDialog({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
card,
|
||||||
|
onSave,
|
||||||
|
isSaving = false,
|
||||||
|
}: CardEditDialogProps) {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
status: '',
|
||||||
|
hours: 0,
|
||||||
|
timeSpent: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Estados para os campos de tempo manual
|
||||||
|
const [manualHours, setManualHours] = useState(0);
|
||||||
|
const [manualMinutes, setManualMinutes] = useState(0);
|
||||||
|
const [manualSeconds, setManualSeconds] = useState(0);
|
||||||
|
|
||||||
|
// Estados para o histórico de tempo gasto
|
||||||
|
const [timeSpentHistory, setTimeSpentHistory] = useState<TimeSpentRecord[]>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [isLoadingHistory, setIsLoadingHistory] = useState(false);
|
||||||
|
|
||||||
|
// Estados para comentários
|
||||||
|
const [comments, setComments] = useState<CardComment[]>([]);
|
||||||
|
const [isLoadingComments, setIsLoadingComments] = useState(false);
|
||||||
|
const [newComment, setNewComment] = useState('');
|
||||||
|
const [isSubmittingComment, setIsSubmittingComment] = useState(false);
|
||||||
|
const [deletingCommentId, setDeletingCommentId] = useState<string | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
|
||||||
|
// Estados para o AlertDialog de confirmação
|
||||||
|
const [showDeleteAlert, setShowDeleteAlert] = useState(false);
|
||||||
|
const [commentToDelete, setCommentToDelete] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const formRef = useRef<HTMLFormElement>(null);
|
||||||
|
|
||||||
|
// Função para converter segundos em horas, minutos e segundos
|
||||||
|
const secondsToTime = (totalSeconds: number) => {
|
||||||
|
const hours = Math.floor(totalSeconds / 3600);
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||||
|
const seconds = totalSeconds % 60;
|
||||||
|
return { hours, minutes, seconds };
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para converter horas, minutos e segundos em segundos
|
||||||
|
const timeToSeconds = (hours: number, minutes: number, seconds: number) => {
|
||||||
|
return hours * 3600 + minutes * 60 + seconds;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Atualizar formData quando o card mudar
|
||||||
|
useEffect(() => {
|
||||||
|
if (card) {
|
||||||
|
setFormData({
|
||||||
|
name: card.name,
|
||||||
|
description: card.description || '',
|
||||||
|
status: card.status,
|
||||||
|
hours: card.hours,
|
||||||
|
timeSpent: 0, // Começar com 0 para adição manual
|
||||||
|
});
|
||||||
|
|
||||||
|
// Inicializar campos manuais com 0
|
||||||
|
setManualHours(0);
|
||||||
|
setManualMinutes(0);
|
||||||
|
setManualSeconds(0);
|
||||||
|
}
|
||||||
|
}, [card]);
|
||||||
|
|
||||||
|
// Atualizar quando o card mudar (após salvamento)
|
||||||
|
useEffect(() => {
|
||||||
|
if (card) {
|
||||||
|
// Atualizar apenas os campos que não são de tempo manual
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
name: card.name,
|
||||||
|
description: card.description || '',
|
||||||
|
status: card.status,
|
||||||
|
hours: card.hours,
|
||||||
|
// Manter timeSpent como 0 para adições manuais
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}, [card]);
|
||||||
|
|
||||||
|
// Atualizar o tempo gasto quando os campos manuais mudarem
|
||||||
|
useEffect(() => {
|
||||||
|
const newTimeSpent = timeToSeconds(
|
||||||
|
manualHours,
|
||||||
|
manualMinutes,
|
||||||
|
manualSeconds
|
||||||
|
);
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
timeSpent: newTimeSpent,
|
||||||
|
}));
|
||||||
|
}, [manualHours, manualMinutes, manualSeconds]);
|
||||||
|
|
||||||
|
// Focar no input de nome quando o dialog abrir
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && nameInputRef.current) {
|
||||||
|
// Pequeno delay para garantir que o dialog esteja completamente aberto
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
nameInputRef.current?.focus();
|
||||||
|
nameInputRef.current?.select();
|
||||||
|
}, 150);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// Função para buscar o histórico de tempo gasto
|
||||||
|
const fetchTimeSpentHistory = async (cardId: string) => {
|
||||||
|
try {
|
||||||
|
setIsLoadingHistory(true);
|
||||||
|
const response = await fetch(`/api/getTimeSpentHistory/${cardId}`, {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
if (result.success) {
|
||||||
|
setTimeSpentHistory(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar histórico de tempo:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingHistory(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para buscar comentários
|
||||||
|
const fetchComments = async (cardId: string) => {
|
||||||
|
try {
|
||||||
|
setIsLoadingComments(true);
|
||||||
|
const response = await fetch(`/api/getCardComments/${cardId}`, {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
if (result.success) {
|
||||||
|
setComments(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar comentários:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingComments(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para criar comentário
|
||||||
|
const handleCreateComment = async () => {
|
||||||
|
if (!card || !newComment.trim()) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsSubmittingComment(true);
|
||||||
|
const response = await fetch('/api/createCardComment', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify({
|
||||||
|
cardId: card.id,
|
||||||
|
content: newComment.trim(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
if (result.success) {
|
||||||
|
setNewComment('');
|
||||||
|
// Recarregar comentários
|
||||||
|
await fetchComments(card.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar comentário:', error);
|
||||||
|
} finally {
|
||||||
|
setIsSubmittingComment(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para mostrar o AlertDialog de confirmação
|
||||||
|
const handleDeleteCommentClick = (commentId: string) => {
|
||||||
|
setCommentToDelete(commentId);
|
||||||
|
setShowDeleteAlert(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para deletar comentário
|
||||||
|
const handleDeleteComment = async () => {
|
||||||
|
if (!card || !commentToDelete) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setDeletingCommentId(commentToDelete);
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/deleteCardComment/${commentToDelete}`,
|
||||||
|
{
|
||||||
|
method: 'DELETE',
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
if (result.success) {
|
||||||
|
// Recarregar comentários
|
||||||
|
await fetchComments(card.id);
|
||||||
|
} else {
|
||||||
|
alert(result.error || 'Erro ao deletar comentário');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const result = await response.json();
|
||||||
|
alert(result.error || 'Erro ao deletar comentário');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao deletar comentário:', error);
|
||||||
|
alert('Erro ao deletar comentário');
|
||||||
|
} finally {
|
||||||
|
setDeletingCommentId(null);
|
||||||
|
setShowDeleteAlert(false);
|
||||||
|
setCommentToDelete(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para cancelar a exclusão
|
||||||
|
const handleCancelDelete = () => {
|
||||||
|
setShowDeleteAlert(false);
|
||||||
|
setCommentToDelete(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Buscar histórico e comentários quando o card mudar
|
||||||
|
useEffect(() => {
|
||||||
|
if (card && isOpen) {
|
||||||
|
fetchTimeSpentHistory(card.id);
|
||||||
|
fetchComments(card.id);
|
||||||
|
}
|
||||||
|
}, [card, isOpen]);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!card) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Se há tempo manual sendo adicionado, enviar esse valor
|
||||||
|
if (formData.timeSpent > 0) {
|
||||||
|
await onSave({
|
||||||
|
id: card.id,
|
||||||
|
name: formData.name,
|
||||||
|
description: formData.description,
|
||||||
|
status: formData.status,
|
||||||
|
hours: formData.hours,
|
||||||
|
timeSpent: formData.timeSpent, // Enviar o tempo digitado
|
||||||
|
isManualTimeAddition: true, // Indicar que é uma adição manual
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Se não há tempo adicional, salvar normalmente sem modificar o tempo
|
||||||
|
await onSave({
|
||||||
|
id: card.id,
|
||||||
|
name: formData.name,
|
||||||
|
description: formData.description,
|
||||||
|
status: formData.status,
|
||||||
|
hours: formData.hours,
|
||||||
|
timeSpent: 0, // Não adicionar tempo
|
||||||
|
isManualTimeAddition: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onClose();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao salvar card:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (field: string, value: string | number) => {
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[field]: value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
// Permitir que todos os eventos de teclado funcionem normalmente
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// Se pressionar Enter no input de nome, submeter o formulário
|
||||||
|
if (e.key === 'Enter' && e.target === nameInputRef.current) {
|
||||||
|
e.preventDefault();
|
||||||
|
formRef.current?.requestSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
// Permitir todos os caracteres, incluindo espaço e Enter
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para formatar data e hora
|
||||||
|
const formatDateTime = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleString('pt-BR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||||
|
<DialogContent
|
||||||
|
className="sm:max-w-[425px]"
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
onKeyUp={handleKeyDown}
|
||||||
|
onKeyPress={handleKeyDown}
|
||||||
|
>
|
||||||
|
<Tabs defaultValue="edit">
|
||||||
|
<TabsList defaultValue="edit">
|
||||||
|
<TabsTrigger value="edit">Editar</TabsTrigger>
|
||||||
|
<TabsTrigger value="time">Tempo</TabsTrigger>
|
||||||
|
<TabsTrigger value="comments">Comentários</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="edit">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Editar Card</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Faça as alterações necessárias no card e clique em salvar.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="name">Nome do Card</Label>
|
||||||
|
<input
|
||||||
|
ref={nameInputRef}
|
||||||
|
id="name"
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
onKeyUp={handleInputKeyDown}
|
||||||
|
onKeyPress={handleInputKeyDown}
|
||||||
|
placeholder="Digite o nome do card"
|
||||||
|
required
|
||||||
|
autoComplete="off"
|
||||||
|
autoFocus
|
||||||
|
className="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="description">Descrição</Label>
|
||||||
|
<Input
|
||||||
|
id="description"
|
||||||
|
type="text"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange('description', e.target.value)
|
||||||
|
}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
onKeyUp={handleInputKeyDown}
|
||||||
|
onKeyPress={handleInputKeyDown}
|
||||||
|
placeholder="Digite a descrição do card"
|
||||||
|
autoComplete="off"
|
||||||
|
className="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="status">Status</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.status}
|
||||||
|
onValueChange={(value) => handleInputChange('status', value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione o status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{statusOptions.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="hours">Horas Estimadas</Label>
|
||||||
|
<Input
|
||||||
|
id="hours"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.5"
|
||||||
|
value={formData.hours}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange(
|
||||||
|
'hours',
|
||||||
|
parseFloat(e.target.value) || 0
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
placeholder="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tempo Total Gasto</Label>
|
||||||
|
<div className="flex items-center gap-2 p-2 bg-muted rounded-md border">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{formatTimeSpent(card?.timeSpent || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Campos para adição manual do tempo */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Adicionar Tempo Manualmente</Label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="manualHours" className="text-xs">
|
||||||
|
Horas
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="manualHours"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="1"
|
||||||
|
value={manualHours}
|
||||||
|
onChange={(e) =>
|
||||||
|
setManualHours(parseInt(e.target.value) || 0)
|
||||||
|
}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
placeholder="0"
|
||||||
|
className="text-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="manualMinutes" className="text-xs">
|
||||||
|
Minutos
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="manualMinutes"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="59"
|
||||||
|
step="1"
|
||||||
|
value={manualMinutes}
|
||||||
|
onChange={(e) =>
|
||||||
|
setManualMinutes(parseInt(e.target.value) || 0)
|
||||||
|
}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
placeholder="0"
|
||||||
|
className="text-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="manualSeconds" className="text-xs">
|
||||||
|
Segundos
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="manualSeconds"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="59"
|
||||||
|
step="1"
|
||||||
|
value={manualSeconds}
|
||||||
|
onChange={(e) =>
|
||||||
|
setManualSeconds(parseInt(e.target.value) || 0)
|
||||||
|
}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
placeholder="0"
|
||||||
|
className="text-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Tempo a ser adicionado: {formatTimeSpent(formData.timeSpent)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={isSaving}>
|
||||||
|
{isSaving ? 'Salvando...' : 'Salvar'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="time">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Histórico de Tempo Gasto</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Visualize todos os registros de tempo gasto neste card.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{isLoadingHistory ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Carregando histórico...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : timeSpentHistory.length === 0 ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Nenhum registro de tempo encontrado.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||||
|
{timeSpentHistory.map((record) => (
|
||||||
|
<div
|
||||||
|
key={record.id}
|
||||||
|
className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border"
|
||||||
|
>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<span className="font-medium text-sm">
|
||||||
|
{record.userName || 'Usuário desconhecido'}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{record.userEmail}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{formatDateTime(record.createdAt)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-semibold text-sm">
|
||||||
|
{formatTimeSpent(record.timeSpent)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="pt-4 border-t">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
Tempo Total Gasto:
|
||||||
|
</span>
|
||||||
|
<span className="text-lg font-bold">
|
||||||
|
{formatTimeSpent(
|
||||||
|
timeSpentHistory.reduce(
|
||||||
|
(total, record) => total + record.timeSpent,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="comments">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Comentários</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Adicione comentários e acompanhe a discussão sobre este card.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Formulário para adicionar comentário */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="newComment">Adicionar Comentário</Label>
|
||||||
|
<Textarea
|
||||||
|
id="newComment"
|
||||||
|
value={newComment}
|
||||||
|
onChange={(e) => setNewComment(e.target.value)}
|
||||||
|
placeholder="Digite seu comentário..."
|
||||||
|
rows={3}
|
||||||
|
className="resize-none"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={handleCreateComment}
|
||||||
|
disabled={!newComment.trim() || isSubmittingComment}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
{isSubmittingComment ? 'Enviando...' : 'Enviar'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lista de comentários */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{isLoadingComments ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Carregando comentários...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : comments.length === 0 ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Nenhum comentário encontrado.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||||
|
{comments.map((comment) => (
|
||||||
|
<div
|
||||||
|
key={comment.id}
|
||||||
|
className="p-3 bg-muted/50 rounded-lg border"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-medium text-sm">
|
||||||
|
{comment.userName || 'Usuário desconhecido'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDeleteCommentClick(comment.id)}
|
||||||
|
disabled={deletingCommentId === comment.id}
|
||||||
|
className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
|
||||||
|
>
|
||||||
|
{deletingCommentId === comment.id ? (
|
||||||
|
<div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
||||||
|
) : (
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm mb-2 whitespace-pre-wrap">
|
||||||
|
{comment.content}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{formatDateTime(comment.createdAt)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</DialogContent>
|
||||||
|
|
||||||
|
{/* AlertDialog para confirmação de exclusão de comentário */}
|
||||||
|
<AlertDialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Confirmar Exclusão</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
Tem certeza que deseja deletar este comentário? Esta ação não pode
|
||||||
|
ser desfeita.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel onClick={handleCancelDelete}>
|
||||||
|
Cancelar
|
||||||
|
</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={handleDeleteComment}
|
||||||
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||||
|
>
|
||||||
|
Deletar
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,271 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { PlusIcon } from 'lucide-react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
interface CreateCardDialogProps {
|
||||||
|
projectId: string;
|
||||||
|
onCreateCard: (newCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
order: number;
|
||||||
|
}) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusOptions = [
|
||||||
|
{ value: 'A fazer', label: 'A fazer' },
|
||||||
|
{ value: 'Em progresso', label: 'Em progresso' },
|
||||||
|
{ value: 'Em revisão', label: 'Em revisão' },
|
||||||
|
{ value: 'Testando', label: 'Testando' },
|
||||||
|
{ value: 'Concluido', label: 'Concluído' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function CreateCardDialog({
|
||||||
|
projectId,
|
||||||
|
onCreateCard,
|
||||||
|
}: CreateCardDialogProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
status: 'A fazer',
|
||||||
|
hours: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const formRef = useRef<HTMLFormElement>(null);
|
||||||
|
|
||||||
|
// Resetar formulário quando o dialog abrir/fechar
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
status: 'A fazer',
|
||||||
|
hours: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// Focar no input de nome quando o dialog abrir
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && nameInputRef.current) {
|
||||||
|
// Pequeno delay para garantir que o dialog esteja completamente aberto
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
nameInputRef.current?.focus();
|
||||||
|
}, 150);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
const response = await fetch('/api/createCard', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: formData.name.trim(),
|
||||||
|
description: formData.description.trim(),
|
||||||
|
status: formData.status,
|
||||||
|
hours: formData.hours,
|
||||||
|
projectId,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.message || 'Erro ao criar card');
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
// Chamar callback para atualizar a lista de cards
|
||||||
|
onCreateCard(result.data);
|
||||||
|
|
||||||
|
// Fechar dialog
|
||||||
|
setIsOpen(false);
|
||||||
|
} else {
|
||||||
|
throw new Error(result.message || 'Erro ao criar card');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar card:', error);
|
||||||
|
// Aqui você pode adicionar um toast de erro se desejar
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (field: string, value: string | number) => {
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[field]: value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
// Permitir que todos os eventos de teclado funcionem normalmente
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// Se pressionar Enter no input de nome, submeter o formulário
|
||||||
|
if (e.key === 'Enter' && e.target === nameInputRef.current) {
|
||||||
|
e.preventDefault();
|
||||||
|
formRef.current?.requestSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
// Permitir todos os caracteres, incluindo espaço e Enter
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (open: boolean) => {
|
||||||
|
setIsOpen(open);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<PlusIcon className="w-4 h-4 mr-2" />
|
||||||
|
Novo Card
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent
|
||||||
|
className="sm:max-w-[425px]"
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
onKeyUp={handleKeyDown}
|
||||||
|
onKeyPress={handleKeyDown}
|
||||||
|
>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Criar Novo Card</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Preencha as informações do novo card e clique em criar.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="name">Nome do Card</Label>
|
||||||
|
<input
|
||||||
|
ref={nameInputRef}
|
||||||
|
id="name"
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
onKeyUp={handleInputKeyDown}
|
||||||
|
onKeyPress={handleInputKeyDown}
|
||||||
|
placeholder="Digite o nome do card"
|
||||||
|
required
|
||||||
|
autoComplete="off"
|
||||||
|
autoFocus
|
||||||
|
className="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="description">Descrição</Label>
|
||||||
|
<Input
|
||||||
|
id="description"
|
||||||
|
type="text"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
onKeyUp={handleInputKeyDown}
|
||||||
|
onKeyPress={handleInputKeyDown}
|
||||||
|
placeholder="Digite a descrição do card"
|
||||||
|
autoComplete="off"
|
||||||
|
className="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="status">Status</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.status}
|
||||||
|
onValueChange={(value) => handleInputChange('status', value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione o status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{statusOptions.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="hours">Horas Estimadas</Label>
|
||||||
|
<Input
|
||||||
|
id="hours"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.5"
|
||||||
|
value={formData.hours}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange('hours', parseFloat(e.target.value) || 0)
|
||||||
|
}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
placeholder="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={isLoading}>
|
||||||
|
{isLoading ? 'Criando...' : 'Criar Card'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useTimer } from '@/context/timerContext';
|
||||||
|
import { formatTimeSpent } from '@/utils/timeUtils';
|
||||||
|
import { Clock, Pause, Pen, Play } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import CardEditDialog from './CardEditDialog';
|
||||||
|
|
||||||
|
interface KanbanCardProps {
|
||||||
|
item: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
column: string;
|
||||||
|
order: number;
|
||||||
|
};
|
||||||
|
isUpdating: boolean;
|
||||||
|
onCardUpdate?: (updatedCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
isManualTimeAddition?: boolean;
|
||||||
|
}) => Promise<void>;
|
||||||
|
cardData?: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
description?: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
order: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function KanbanCard({
|
||||||
|
item,
|
||||||
|
isUpdating,
|
||||||
|
onCardUpdate,
|
||||||
|
cardData,
|
||||||
|
}: KanbanCardProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
const { activeCard, startTimer, stopTimer, isPaused } = useTimer();
|
||||||
|
|
||||||
|
const isThisCardActive = activeCard?.id === item.id;
|
||||||
|
|
||||||
|
const handleCardClick = (e: React.MouseEvent) => {
|
||||||
|
// Prevenir que o clique seja tratado como início de drag
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async (updatedCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
isManualTimeAddition?: boolean;
|
||||||
|
}) => {
|
||||||
|
if (!onCardUpdate) return;
|
||||||
|
|
||||||
|
setIsSaving(true);
|
||||||
|
try {
|
||||||
|
await onCardUpdate(updatedCard);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTimerClick = async (e: React.MouseEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (isThisCardActive) {
|
||||||
|
await stopTimer();
|
||||||
|
} else {
|
||||||
|
startTimer(item.id, item.name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="flex flex-col gap-1 relative group cursor-pointer"
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
onClick={handleCardClick}
|
||||||
|
style={{
|
||||||
|
// Desabilitar drag and drop quando o dialog estiver aberto
|
||||||
|
pointerEvents: isDialogOpen ? 'none' : 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isUpdating && (
|
||||||
|
<div className="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full animate-pulse z-10" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`p-2 hover:bg-accent/20 rounded-md transition-colors relative ${
|
||||||
|
isThisCardActive ? 'bg-primary/10 border border-primary/30' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="font-medium text-sm border-b border-gray-200 mb-2">
|
||||||
|
{item.name}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{(item.description || cardData?.description) && (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{item.description || cardData?.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{cardData && (
|
||||||
|
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
|
||||||
|
<Clock className="w-3 h-3" />
|
||||||
|
<span>{cardData.hours}h</span>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
cardData.hours > 0 &&
|
||||||
|
cardData.timeSpent >= cardData.hours * 3600
|
||||||
|
? 'text-red-500'
|
||||||
|
: 'text-muted-foreground'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{' '}
|
||||||
|
/ {formatTimeSpent(cardData.timeSpent)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Indicador visual de que é clicável */}
|
||||||
|
{isHovered && (
|
||||||
|
<div className="absolute top-1 right-1 text-muted-foreground opacity-70 bg-background/80 px-0.5 py-0.5 rounded-lg text-xs">
|
||||||
|
<Pen className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Botão do temporizador */}
|
||||||
|
<div className="w-full flex justify-center items-center mt-2 -mb-3">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleTimerClick}
|
||||||
|
className={`h-6 w-6 p-0 ${
|
||||||
|
isThisCardActive
|
||||||
|
? 'text-destructive hover:text-destructive'
|
||||||
|
: 'text-primary hover:text-primary'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isThisCardActive ? (
|
||||||
|
<Pause className="w-3 h-3" />
|
||||||
|
) : (
|
||||||
|
<Play className="w-3 h-3" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Indicador visual de card ativo */}
|
||||||
|
{isThisCardActive && (
|
||||||
|
<div className="absolute top-0 left-0 w-full h-1 bg-primary rounded-t-md" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Indicador de status pausado */}
|
||||||
|
{isThisCardActive && isPaused && (
|
||||||
|
<div className="absolute top-1 left-1 bg-yellow-500 text-white text-xs px-1 py-0.5 rounded">
|
||||||
|
PAUSADO
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CardEditDialog
|
||||||
|
isOpen={isDialogOpen}
|
||||||
|
onClose={() => setIsDialogOpen(false)}
|
||||||
|
card={
|
||||||
|
cardData
|
||||||
|
? {
|
||||||
|
...cardData,
|
||||||
|
description: cardData.description || '',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
description: '',
|
||||||
|
status: item.column,
|
||||||
|
hours: 0,
|
||||||
|
timeSpent: 0,
|
||||||
|
order: item.order,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onSave={handleSave}
|
||||||
|
isSaving={isSaving}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
interface NotificationToastProps {
|
||||||
|
notification: {
|
||||||
|
message: string;
|
||||||
|
type: 'success' | 'error';
|
||||||
|
} | null;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NotificationToast({
|
||||||
|
notification,
|
||||||
|
onClose,
|
||||||
|
}: NotificationToastProps) {
|
||||||
|
if (!notification) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`fixed top-4 right-4 z-50 p-4 rounded-md shadow-lg transition-all duration-300 ${
|
||||||
|
notification.type === 'success'
|
||||||
|
? 'bg-green-500 text-white'
|
||||||
|
: 'bg-red-500 text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>{notification.message}</span>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="ml-2 text-white hover:text-gray-200"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import CreateCardDialog from './CreateCardDialog';
|
||||||
|
|
||||||
|
interface ProjectHeaderProps {
|
||||||
|
project: Project | null;
|
||||||
|
onCreateCard: (newCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
order: number;
|
||||||
|
}) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectHeader({
|
||||||
|
project,
|
||||||
|
onCreateCard,
|
||||||
|
}: ProjectHeaderProps) {
|
||||||
|
return (
|
||||||
|
<header className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-foreground">
|
||||||
|
{project ? project.name.toUpperCase() : 'Carregando...'}
|
||||||
|
</h1>
|
||||||
|
<p className="text-md text-muted-foreground">
|
||||||
|
{project
|
||||||
|
? project.description.length > 40
|
||||||
|
? project.description.slice(0, 40) + '...'
|
||||||
|
: project.description
|
||||||
|
: 'Carregando...'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{project && (
|
||||||
|
<CreateCardDialog
|
||||||
|
projectId={project.id}
|
||||||
|
onCreateCard={onCreateCard}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { CalendarIcon, GitBranch, User } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ProjectInfoProps {
|
||||||
|
project: Project;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectInfo({ project }: ProjectInfoProps) {
|
||||||
|
// Função para formatar a data final de forma segura
|
||||||
|
const formatFinalDate = (finalDate: Date | string | null | undefined) => {
|
||||||
|
if (!finalDate) return 'Não definido';
|
||||||
|
|
||||||
|
// Se já é um objeto Date, usar diretamente
|
||||||
|
const date = finalDate instanceof Date ? finalDate : new Date(finalDate);
|
||||||
|
|
||||||
|
// Verifica se a data é válida (não é 31/12/1969 ou data inválida)
|
||||||
|
if (isNaN(date.getTime()) || date.getFullYear() === 1969) {
|
||||||
|
return 'Não definido';
|
||||||
|
}
|
||||||
|
|
||||||
|
return date.toLocaleDateString();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="w-2/5">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Informações do Projeto</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{project.projectUrl && (
|
||||||
|
<div className="flex items-center gap-2 ">
|
||||||
|
<GitBranch className="w-4 h-4" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{project.projectUrl.replace(/https:\/\/github\.com\//g, '')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CalendarIcon className="w-4 h-4" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{new Date(project.createdAt).toLocaleDateString()} {' - '}
|
||||||
|
{formatFinalDate(project.finalDate)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<User className="w-4 h-4" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{project.users?.[0].name || 'Nenhum usuário encontrado'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
import {
|
||||||
|
KanbanBoard,
|
||||||
|
KanbanCard as KanbanCardComponent,
|
||||||
|
KanbanCards,
|
||||||
|
KanbanHeader,
|
||||||
|
KanbanProvider,
|
||||||
|
} from '@/components/ui/kibo-ui/kanban';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import KanbanCard from './KanbanCard';
|
||||||
|
|
||||||
|
type KanbanItemProps = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
column: string;
|
||||||
|
order?: number;
|
||||||
|
} & Record<string, unknown>;
|
||||||
|
|
||||||
|
interface ProjectKanbanProps {
|
||||||
|
project: Project;
|
||||||
|
updatingCards: Set<string>;
|
||||||
|
onDataChange: (newData: KanbanItemProps[]) => Promise<void>;
|
||||||
|
onCardUpdate?: (updatedCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
isManualTimeAddition?: boolean;
|
||||||
|
}) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectKanban({
|
||||||
|
project,
|
||||||
|
updatingCards,
|
||||||
|
onDataChange,
|
||||||
|
onCardUpdate,
|
||||||
|
}: ProjectKanbanProps) {
|
||||||
|
const columns = [
|
||||||
|
{ id: 'A fazer', name: 'A fazer' },
|
||||||
|
{ id: 'Em progresso', name: 'Em progresso' },
|
||||||
|
{ id: 'Em revisão', name: 'Em revisão' },
|
||||||
|
{ id: 'Testando', name: 'Testando' },
|
||||||
|
{ id: 'Concluido', name: 'Concluído' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = project.cards.map((card) => ({
|
||||||
|
id: card.id,
|
||||||
|
name: card.name,
|
||||||
|
description: card.description || '',
|
||||||
|
column: card.status,
|
||||||
|
order: card.order || 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const getColumnColor = (columnId: string) => {
|
||||||
|
switch (columnId) {
|
||||||
|
case 'A fazer':
|
||||||
|
return '#3b82f6';
|
||||||
|
case 'Em progresso':
|
||||||
|
return '#f59e0b';
|
||||||
|
case 'Em revisão':
|
||||||
|
return '#8b5cf6';
|
||||||
|
case 'Testando':
|
||||||
|
return '#10b981';
|
||||||
|
default:
|
||||||
|
return '#6b7280';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<KanbanProvider columns={columns} data={data} onDataChange={onDataChange}>
|
||||||
|
{(column) => (
|
||||||
|
<KanbanBoard id={column.id} key={column.id}>
|
||||||
|
<KanbanHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className="h-2 w-2 rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: getColumnColor(column.id),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span>{column.name}</span>
|
||||||
|
</div>
|
||||||
|
</KanbanHeader>
|
||||||
|
<KanbanCards id={column.id}>
|
||||||
|
{(item: KanbanItemProps) => {
|
||||||
|
// Encontrar os dados completos do card
|
||||||
|
const fullCardData = project.cards.find(
|
||||||
|
(card) => card.id === item.id
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<KanbanCardComponent key={item.id} {...item}>
|
||||||
|
<KanbanCard
|
||||||
|
key={`${item.id}-${fullCardData?.timeSpent}-${fullCardData?.name}`}
|
||||||
|
item={{
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
description: item.description as string,
|
||||||
|
column: item.column,
|
||||||
|
order: item.order || 0,
|
||||||
|
}}
|
||||||
|
isUpdating={updatingCards.has(item.id)}
|
||||||
|
onCardUpdate={onCardUpdate}
|
||||||
|
cardData={fullCardData}
|
||||||
|
/>
|
||||||
|
</KanbanCardComponent>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</KanbanCards>
|
||||||
|
</KanbanBoard>
|
||||||
|
)}
|
||||||
|
</KanbanProvider>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { AvatarStack } from '@/components/ui/kibo-ui/avatar-stack';
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from '@/components/ui/tooltip';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
interface ProjectMembersProps {
|
||||||
|
project: Project;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectMembers({ project }: ProjectMembersProps) {
|
||||||
|
// Debug: Log dos dados dos usuários
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('ProjectMembers - Dados dos usuários:', project.users);
|
||||||
|
project.users?.forEach((user, index) => {
|
||||||
|
console.log(`Usuário ${index + 1}:`, {
|
||||||
|
id: user.id,
|
||||||
|
name: user.name,
|
||||||
|
email: user.email,
|
||||||
|
image: user.image,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, [project.users]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="w-3/5 flex flex-col gap-2">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Membros do Projeto</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-2">
|
||||||
|
<TooltipProvider>
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-2">
|
||||||
|
<AvatarStack animate>
|
||||||
|
{project.users?.map((user) => (
|
||||||
|
<Tooltip key={user.id}>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Avatar className="w-10 h-10 cursor-pointer">
|
||||||
|
<AvatarImage
|
||||||
|
src={user.image || undefined}
|
||||||
|
alt={user.name}
|
||||||
|
onError={(e) => {
|
||||||
|
console.error(
|
||||||
|
'Erro ao carregar imagem do usuário:',
|
||||||
|
user.name,
|
||||||
|
user.image
|
||||||
|
);
|
||||||
|
e.currentTarget.style.display = 'none';
|
||||||
|
}}
|
||||||
|
onLoad={() => {
|
||||||
|
console.log(
|
||||||
|
'Imagem carregada com sucesso para:',
|
||||||
|
user.name,
|
||||||
|
user.image
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<AvatarFallback>
|
||||||
|
{(() => {
|
||||||
|
const names = user.name.trim().split(' ');
|
||||||
|
if (names.length >= 2) {
|
||||||
|
return `${names[0]
|
||||||
|
.charAt(0)
|
||||||
|
.toUpperCase()}${names[1]
|
||||||
|
.charAt(0)
|
||||||
|
.toUpperCase()}`;
|
||||||
|
}
|
||||||
|
return names[0].charAt(0).toUpperCase();
|
||||||
|
})()}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{user.name}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</AvatarStack>
|
||||||
|
</div>
|
||||||
|
</TooltipProvider>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
import CardDash from '@/components/CardDash';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { BarChart3Icon, CalendarIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ProjectStatsProps {
|
||||||
|
project: Project;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectStats({ project }: ProjectStatsProps) {
|
||||||
|
// Função auxiliar para calcular estatísticas com valores padrão
|
||||||
|
const calculateProjectStats = () => {
|
||||||
|
if (!project.cards || project.cards.length === 0) {
|
||||||
|
return {
|
||||||
|
totalCards: 0,
|
||||||
|
activeCards: 0,
|
||||||
|
completedCards: 0,
|
||||||
|
estimatedHours: 0,
|
||||||
|
spentHours: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalCards: project.cards.length,
|
||||||
|
activeCards: project.cards.filter((card) => card.status !== 'Concluido')
|
||||||
|
.length,
|
||||||
|
completedCards: project.cards.filter(
|
||||||
|
(card) => card.status === 'Concluido'
|
||||||
|
).length,
|
||||||
|
estimatedHours: project.cards.reduce(
|
||||||
|
(acc, card) => acc + (card.hours || 0),
|
||||||
|
0
|
||||||
|
),
|
||||||
|
spentHours: project.cards.reduce(
|
||||||
|
(acc, card) => acc + (card.timeSpent || 0),
|
||||||
|
0
|
||||||
|
),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const stats = calculateProjectStats();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
|
||||||
|
<CardDash
|
||||||
|
title="Total de Cards"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.totalCards}
|
||||||
|
description="Cards no projeto"
|
||||||
|
isLoading={false}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Cards Ativos"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.activeCards}
|
||||||
|
description="Cards em andamento"
|
||||||
|
isLoading={false}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Cards Concluídos"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
value={stats.completedCards}
|
||||||
|
description="Cards finalizados"
|
||||||
|
isLoading={false}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Horas Estimadas"
|
||||||
|
icon={<CalendarIcon className="w-4 h-4" />}
|
||||||
|
value={stats.estimatedHours}
|
||||||
|
description="Horas estimadas total"
|
||||||
|
isLoading={false}
|
||||||
|
/>
|
||||||
|
<CardDash
|
||||||
|
title="Horas Produzidas"
|
||||||
|
icon={<BarChart3Icon className="w-4 h-4" />}
|
||||||
|
valueProject={stats.estimatedHours}
|
||||||
|
value={stats.spentHours}
|
||||||
|
description="Horas produzidas total"
|
||||||
|
isLoading={false}
|
||||||
|
caculavel={true}
|
||||||
|
formatAsTime={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
# Componentes do Projeto
|
||||||
|
|
||||||
|
Esta pasta contém todos os componentes extraídos do arquivo `page.tsx` para manter uma arquitetura mais limpa e facilitar a manutenção.
|
||||||
|
|
||||||
|
## Estrutura de Arquivos
|
||||||
|
|
||||||
|
### Componentes UI
|
||||||
|
|
||||||
|
- **`NotificationToast.tsx`** - Componente para exibir notificações de sucesso e erro
|
||||||
|
- **`ProjectHeader.tsx`** - Cabeçalho do projeto com título, descrição e botão de novo card
|
||||||
|
- **`ProjectStats.tsx`** - Cards de estatísticas do projeto (total de cards, horas, etc.)
|
||||||
|
- **`ProjectInfo.tsx`** - Informações básicas do projeto (URL, datas, usuário)
|
||||||
|
- **`ProjectMembers.tsx`** - Lista de membros do projeto com avatares
|
||||||
|
- **`ProjectKanban.tsx`** - Componente principal do kanban
|
||||||
|
- **`KanbanCard.tsx`** - Card individual do kanban
|
||||||
|
|
||||||
|
### Hooks
|
||||||
|
|
||||||
|
- **`useProject.tsx`** - Hook personalizado que gerencia toda a lógica do projeto
|
||||||
|
|
||||||
|
### Utilitários
|
||||||
|
|
||||||
|
- **`index.ts`** - Arquivo de índice para exportar todos os componentes
|
||||||
|
|
||||||
|
## Benefícios da Refatoração
|
||||||
|
|
||||||
|
1. **Separação de Responsabilidades**: Cada componente tem uma responsabilidade específica
|
||||||
|
2. **Reutilização**: Componentes podem ser reutilizados em outras partes da aplicação
|
||||||
|
3. **Manutenibilidade**: Código mais fácil de manter e debugar
|
||||||
|
4. **Testabilidade**: Componentes isolados são mais fáceis de testar
|
||||||
|
5. **Legibilidade**: Código mais limpo e organizado
|
||||||
|
|
||||||
|
## Como Usar
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
NotificationToast,
|
||||||
|
ProjectHeader,
|
||||||
|
ProjectStats,
|
||||||
|
ProjectInfo,
|
||||||
|
ProjectMembers,
|
||||||
|
ProjectKanban,
|
||||||
|
useProject,
|
||||||
|
} from './components';
|
||||||
|
|
||||||
|
export default function ProjectPage() {
|
||||||
|
const {
|
||||||
|
project,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
updatingCards,
|
||||||
|
notification,
|
||||||
|
setNotification,
|
||||||
|
handleDataChange,
|
||||||
|
} = useProject();
|
||||||
|
|
||||||
|
// ... resto do código
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Funcionalidades
|
||||||
|
|
||||||
|
### useProject Hook
|
||||||
|
|
||||||
|
- Gerencia o estado do projeto
|
||||||
|
- Faz requisições para buscar dados
|
||||||
|
- Gerencia notificações
|
||||||
|
- Controla atualizações de cards do kanban
|
||||||
|
- Gerencia loading states e erros
|
||||||
|
|
||||||
|
### Componentes
|
||||||
|
|
||||||
|
- **NotificationToast**: Exibe notificações temporárias
|
||||||
|
- **ProjectHeader**: Interface do cabeçalho do projeto
|
||||||
|
- **ProjectStats**: Métricas e estatísticas do projeto
|
||||||
|
- **ProjectInfo**: Informações detalhadas do projeto
|
||||||
|
- **ProjectMembers**: Lista de membros com avatares
|
||||||
|
- **ProjectKanban**: Interface drag-and-drop do kanban
|
||||||
|
- **KanbanCard**: Cards individuais do kanban
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
export { default as CardEditDialog } from './CardEditDialog';
|
||||||
|
export { default as CreateCardDialog } from './CreateCardDialog';
|
||||||
|
export { default as KanbanCard } from './KanbanCard';
|
||||||
|
export { default as NotificationToast } from './NotificationToast';
|
||||||
|
export { default as ProjectHeader } from './ProjectHeader';
|
||||||
|
export { default as ProjectInfo } from './ProjectInfo';
|
||||||
|
export { default as ProjectKanban } from './ProjectKanban';
|
||||||
|
export { default as ProjectMembers } from './ProjectMembers';
|
||||||
|
export { default as ProjectStats } from './ProjectStats';
|
||||||
|
export { default as useProject } from './useProject';
|
||||||
|
|
@ -0,0 +1,457 @@
|
||||||
|
import { useOrganization } from '@/context/organizationContext';
|
||||||
|
import { useTimer } from '@/context/timerContext';
|
||||||
|
import useAuth from '@/hook/useAuth';
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { formatTimeSpent } from '@/utils/timeUtils';
|
||||||
|
import { useParams, useRouter } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
type KanbanItemProps = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
column: string;
|
||||||
|
order?: number;
|
||||||
|
} & Record<string, unknown>;
|
||||||
|
|
||||||
|
export default function useProject() {
|
||||||
|
const { isAuthenticated } = useAuth();
|
||||||
|
const { selectedOrganization } = useOrganization();
|
||||||
|
const { setOnTimeSaved } = useTimer();
|
||||||
|
const router = useRouter();
|
||||||
|
const [project, setProject] = useState<Project | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [updatingCards, setUpdatingCards] = useState<Set<string>>(new Set());
|
||||||
|
const [notification, setNotification] = useState<{
|
||||||
|
message: string;
|
||||||
|
type: 'success' | 'error';
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
// Configurar callback para quando o tempo for salvo
|
||||||
|
useEffect(() => {
|
||||||
|
const handleTimeSaved = (cardId: string, timeSpent: number) => {
|
||||||
|
if (!cardId || !timeSpent) return;
|
||||||
|
|
||||||
|
setProject((currentProject) => {
|
||||||
|
if (currentProject) {
|
||||||
|
// Atualizar o tempo gasto do card no estado local
|
||||||
|
const updatedCards = currentProject.cards.map((card) => {
|
||||||
|
if (card.id === cardId) {
|
||||||
|
return {
|
||||||
|
...card,
|
||||||
|
timeSpent: card.timeSpent + timeSpent,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return card;
|
||||||
|
});
|
||||||
|
|
||||||
|
setNotification({
|
||||||
|
message: `Tempo de ${formatTimeSpent(
|
||||||
|
timeSpent
|
||||||
|
)} adicionado ao card`,
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
|
||||||
|
return { ...currentProject, cards: updatedCards };
|
||||||
|
}
|
||||||
|
return currentProject;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
setOnTimeSaved(handleTimeSaved);
|
||||||
|
|
||||||
|
// Cleanup function
|
||||||
|
return () => {
|
||||||
|
setOnTimeSaved(() => {});
|
||||||
|
};
|
||||||
|
}, []); // Removendo setOnTimeSaved da dependência
|
||||||
|
|
||||||
|
// Limpar notificação automaticamente
|
||||||
|
useEffect(() => {
|
||||||
|
if (notification) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setNotification(null);
|
||||||
|
}, 3000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [notification]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const getProjectData = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const session = await authClient.getSession();
|
||||||
|
|
||||||
|
if (session?.data?.user) {
|
||||||
|
const projectData = await getProject();
|
||||||
|
setProject(projectData);
|
||||||
|
} else {
|
||||||
|
console.error('Usuário não autenticado - sessão:', session);
|
||||||
|
setError('Usuário não autenticado');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar dados do projeto:', error);
|
||||||
|
setError('Erro ao carregar os dados do projeto');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProject = async (): Promise<Project | null> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/getProject/${id}`, {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error(
|
||||||
|
`Erro HTTP: ${response.status} - ${response.statusText}`
|
||||||
|
);
|
||||||
|
const errorText = await response.text();
|
||||||
|
console.error('Corpo do erro:', errorText);
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar projeto:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isAuthenticated) {
|
||||||
|
try {
|
||||||
|
getProjectData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao carregar dados do projeto:', error);
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, id]);
|
||||||
|
|
||||||
|
// Verificar se há organização selecionada
|
||||||
|
useEffect(() => {
|
||||||
|
// Só verificar se não está carregando e não há organização
|
||||||
|
if (!selectedOrganization && !isLoading) {
|
||||||
|
setNotification({
|
||||||
|
message: 'Nenhuma organização selecionada',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push('/dashboard');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}, [selectedOrganization, isLoading, router]);
|
||||||
|
|
||||||
|
// Verificar se o projeto pertence à organização selecionada (apenas após carregamento completo)
|
||||||
|
useEffect(() => {
|
||||||
|
// Só verificar se temos todos os dados necessários
|
||||||
|
if (
|
||||||
|
project &&
|
||||||
|
selectedOrganization &&
|
||||||
|
!isLoading &&
|
||||||
|
project.organizationId
|
||||||
|
) {
|
||||||
|
// Verificar se o projeto pertence à organização selecionada
|
||||||
|
if (project.organizationId !== selectedOrganization.id) {
|
||||||
|
setNotification({
|
||||||
|
message: 'Este projeto não pertence à organização selecionada',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
// Redirecionar para o dashboard após um breve delay
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push('/dashboard');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [project, selectedOrganization, isLoading, router]);
|
||||||
|
|
||||||
|
const handleDataChange = async (newData: KanbanItemProps[]) => {
|
||||||
|
if (!project) return;
|
||||||
|
|
||||||
|
// Encontrar cards que mudaram de status
|
||||||
|
const changedStatusCards = newData.filter((newItem) => {
|
||||||
|
const originalCard = project.cards.find((card) => card.id === newItem.id);
|
||||||
|
return originalCard && originalCard.status !== newItem.column;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Encontrar cards que mudaram de ordem (incluindo mudanças de status)
|
||||||
|
const changedOrderCards = newData.filter((newItem, newIndex) => {
|
||||||
|
const originalCard = project.cards.find((card) => card.id === newItem.id);
|
||||||
|
if (!originalCard) return false;
|
||||||
|
|
||||||
|
// Verificar se mudou de status ou ordem
|
||||||
|
const statusChanged = originalCard.status !== newItem.column;
|
||||||
|
const orderChanged = originalCard.order !== (newItem.order || newIndex);
|
||||||
|
|
||||||
|
return statusChanged || orderChanged;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Atualizar o estado local primeiro para feedback imediato
|
||||||
|
const updatedCards = newData.map((item, index) => {
|
||||||
|
const originalCard = project.cards.find((card) => card.id === item.id);
|
||||||
|
if (!originalCard) {
|
||||||
|
// Se não encontrar o card original, criar um objeto básico
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
description: '',
|
||||||
|
status: item.column,
|
||||||
|
hours: 0,
|
||||||
|
timeSpent: 0,
|
||||||
|
order: item.order !== undefined ? item.order : index,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...originalCard,
|
||||||
|
status: item.column,
|
||||||
|
order: item.order !== undefined ? item.order : index,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setProject({ ...project, cards: updatedCards });
|
||||||
|
|
||||||
|
// Atualizar status no banco de dados
|
||||||
|
for (const changedCard of changedStatusCards) {
|
||||||
|
try {
|
||||||
|
// Adicionar card à lista de cards sendo atualizados
|
||||||
|
setUpdatingCards((prev) => new Set(prev).add(changedCard.id));
|
||||||
|
|
||||||
|
const response = await fetch('/api/updateCardStatus', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify({
|
||||||
|
cardId: changedCard.id,
|
||||||
|
newStatus: changedCard.column,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error('Erro ao atualizar card:', response.status);
|
||||||
|
setNotification({
|
||||||
|
message: 'Erro ao atualizar status do card',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
// Reverter mudança local se falhar
|
||||||
|
const revertedCards = project.cards.map((card) => {
|
||||||
|
if (card.id === changedCard.id) {
|
||||||
|
const originalCard = project.cards.find(
|
||||||
|
(c) => c.id === changedCard.id
|
||||||
|
);
|
||||||
|
return originalCard || card;
|
||||||
|
}
|
||||||
|
return card;
|
||||||
|
});
|
||||||
|
setProject({ ...project, cards: revertedCards });
|
||||||
|
} else {
|
||||||
|
setNotification({
|
||||||
|
message: 'Status do card atualizado com sucesso',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar card:', error);
|
||||||
|
// Reverter mudança local se falhar
|
||||||
|
const revertedCards = project.cards.map((card) => {
|
||||||
|
if (card.id === changedCard.id) {
|
||||||
|
const originalCard = project.cards.find(
|
||||||
|
(c) => c.id === changedCard.id
|
||||||
|
);
|
||||||
|
return originalCard || card;
|
||||||
|
}
|
||||||
|
return card;
|
||||||
|
});
|
||||||
|
setProject({ ...project, cards: revertedCards });
|
||||||
|
} finally {
|
||||||
|
// Remover card da lista de cards sendo atualizados
|
||||||
|
setUpdatingCards((prev) => {
|
||||||
|
const newSet = new Set(prev);
|
||||||
|
newSet.delete(changedCard.id);
|
||||||
|
return newSet;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar ordem no banco de dados
|
||||||
|
if (changedOrderCards.length > 0) {
|
||||||
|
try {
|
||||||
|
// Preparar dados para atualização em lote
|
||||||
|
// Incluir todos os cards que foram afetados pela mudança
|
||||||
|
const cardOrders = newData.map((card, index) => ({
|
||||||
|
cardId: card.id,
|
||||||
|
order: index,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const response = await fetch('/api/updateCardOrder', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify({ cardOrders }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error('Erro ao atualizar ordem dos cards:', response.status);
|
||||||
|
setNotification({
|
||||||
|
message: 'Erro ao atualizar ordem dos cards',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setNotification({
|
||||||
|
message: 'Ordem dos cards atualizada com sucesso',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Atualizar o estado local com os dados do banco
|
||||||
|
const responseData = await response.json();
|
||||||
|
if (responseData.success && responseData.data) {
|
||||||
|
const updatedCardsFromDB = updatedCards.map((card) => {
|
||||||
|
const dbCard = responseData.data.find(
|
||||||
|
(dbCard: { id: string; order: number }) => dbCard.id === card.id
|
||||||
|
);
|
||||||
|
return dbCard ? { ...card, order: dbCard.order } : card;
|
||||||
|
});
|
||||||
|
setProject({ ...project, cards: updatedCardsFromDB });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar ordem dos cards:', error);
|
||||||
|
setNotification({
|
||||||
|
message: 'Erro ao atualizar ordem dos cards',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCardUpdate = async (updatedCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
isManualTimeAddition?: boolean;
|
||||||
|
}) => {
|
||||||
|
if (!project) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Adicionar card à lista de cards sendo atualizados
|
||||||
|
setUpdatingCards((prev) => new Set(prev).add(updatedCard.id));
|
||||||
|
|
||||||
|
// Fazer requisição para atualizar o card
|
||||||
|
const response = await fetch('/api/updateCard', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(updatedCard),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
// Atualizar o estado local
|
||||||
|
const updatedCards = project.cards.map((card) => {
|
||||||
|
if (card.id === updatedCard.id) {
|
||||||
|
// Se for uma adição manual de tempo, somar ao tempo existente
|
||||||
|
// Se não for adição manual, manter o tempo existente
|
||||||
|
const newTimeSpent = updatedCard.isManualTimeAddition
|
||||||
|
? card.timeSpent + updatedCard.timeSpent
|
||||||
|
: card.timeSpent;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...card,
|
||||||
|
name: updatedCard.name,
|
||||||
|
description: updatedCard.description || card.description,
|
||||||
|
status: updatedCard.status,
|
||||||
|
hours: updatedCard.hours,
|
||||||
|
timeSpent: newTimeSpent,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return card;
|
||||||
|
});
|
||||||
|
|
||||||
|
setProject({ ...project, cards: updatedCards });
|
||||||
|
|
||||||
|
setNotification({
|
||||||
|
message: 'Card atualizado com sucesso',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
throw new Error(result.message || 'Erro ao atualizar card');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar card:', error);
|
||||||
|
setNotification({
|
||||||
|
message: 'Erro ao atualizar card',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
throw error;
|
||||||
|
} finally {
|
||||||
|
// Remover card da lista de cards sendo atualizados
|
||||||
|
setUpdatingCards((prev) => {
|
||||||
|
const newSet = new Set(prev);
|
||||||
|
newSet.delete(updatedCard.id);
|
||||||
|
return newSet;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateCard = async (newCard: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
status: string;
|
||||||
|
hours: number;
|
||||||
|
timeSpent: number;
|
||||||
|
order: number;
|
||||||
|
}) => {
|
||||||
|
if (!project) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Adicionar o novo card ao estado local
|
||||||
|
const updatedCards = [...project.cards, newCard];
|
||||||
|
setProject({ ...project, cards: updatedCards });
|
||||||
|
|
||||||
|
setNotification({
|
||||||
|
message: 'Card criado com sucesso',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar card:', error);
|
||||||
|
setNotification({
|
||||||
|
message: 'Erro ao criar card',
|
||||||
|
type: 'error',
|
||||||
|
});
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
project,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
updatingCards,
|
||||||
|
notification,
|
||||||
|
setNotification,
|
||||||
|
handleDataChange,
|
||||||
|
handleCardUpdate,
|
||||||
|
handleCreateCard,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
'use client';
|
||||||
|
import Loading from '@/components/Loading';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { ArrowLeft } from 'lucide-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import {
|
||||||
|
NotificationToast,
|
||||||
|
ProjectHeader,
|
||||||
|
ProjectInfo,
|
||||||
|
ProjectKanban,
|
||||||
|
ProjectMembers,
|
||||||
|
ProjectStats,
|
||||||
|
useProject,
|
||||||
|
} from './components';
|
||||||
|
|
||||||
|
export default function ProjectPage() {
|
||||||
|
const {
|
||||||
|
project,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
updatingCards,
|
||||||
|
notification,
|
||||||
|
setNotification,
|
||||||
|
handleDataChange,
|
||||||
|
handleCardUpdate,
|
||||||
|
handleCreateCard,
|
||||||
|
} = useProject();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <Loading />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Erro: {error}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<NotificationToast
|
||||||
|
notification={notification}
|
||||||
|
onClose={() => setNotification(null)}
|
||||||
|
/>
|
||||||
|
<div className="container mx-auto px-4 py-2">
|
||||||
|
{/* Navegação de volta */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<Link href="/dashboard">
|
||||||
|
<Button variant="outline" size="sm" className="gap-2">
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Voltar ao Dashboard
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProjectHeader project={project} onCreateCard={handleCreateCard} />
|
||||||
|
|
||||||
|
{project && (
|
||||||
|
<main className="flex flex-col gap-4">
|
||||||
|
{/* Cards do Projeto */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<ProjectStats project={project} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-start gap-2 min-h-36 items-stretch">
|
||||||
|
<ProjectInfo project={project} />
|
||||||
|
<ProjectMembers project={project} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kanban */}
|
||||||
|
<ProjectKanban
|
||||||
|
project={project}
|
||||||
|
updatingCards={updatingCards}
|
||||||
|
onDataChange={handleDataChange}
|
||||||
|
onCardUpdate={handleCardUpdate}
|
||||||
|
/>
|
||||||
|
</main>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import {
|
||||||
|
addAllowedEmail,
|
||||||
|
getAllowedEmails,
|
||||||
|
removeAllowedEmail,
|
||||||
|
} from '@/lib/email-validation';
|
||||||
|
import { headers } from 'next/headers';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: await headers(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const organizationId = searchParams.get('organizationId');
|
||||||
|
|
||||||
|
if (!organizationId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'ID da organização é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const allowedEmails = await getAllowedEmails(organizationId);
|
||||||
|
return NextResponse.json({ allowedEmails });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar emails permitidos:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: await headers(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { email, organizationId } = await request.json();
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Email é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!organizationId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'ID da organização é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await addAllowedEmail(
|
||||||
|
email,
|
||||||
|
organizationId,
|
||||||
|
session.user.id
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
return NextResponse.json({ message: result.message });
|
||||||
|
} else {
|
||||||
|
return NextResponse.json({ error: result.message }, { status: 400 });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar email permitido:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: await headers(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { email, organizationId } = await request.json();
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Email é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!organizationId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'ID da organização é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const success = await removeAllowedEmail(email, organizationId);
|
||||||
|
|
||||||
|
if (success) {
|
||||||
|
return NextResponse.json({ message: 'Email removido com sucesso' });
|
||||||
|
} else {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro ao remover email' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao remover email permitido:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { toNextJsHandler } from 'better-auth/next-js';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
const handler = toNextJsHandler(auth);
|
||||||
|
export const { GET, POST } = handler;
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { cardTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
import { eq, max } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ success: false, message: 'Não autorizado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { name, description, status, hours, projectId } = body;
|
||||||
|
|
||||||
|
// Validar dados obrigatórios
|
||||||
|
if (!name || !projectId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
success: false,
|
||||||
|
message: 'Nome do card e ID do projeto são obrigatórios',
|
||||||
|
},
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar a maior ordem atual para o projeto
|
||||||
|
const maxOrderResult = await db
|
||||||
|
.select({ maxOrder: max(cardTable.order) })
|
||||||
|
.from(cardTable)
|
||||||
|
.where(eq(cardTable.projectId, projectId));
|
||||||
|
|
||||||
|
const nextOrder = (maxOrderResult[0]?.maxOrder || 0) + 1;
|
||||||
|
|
||||||
|
// Criar o novo card
|
||||||
|
const [newCard] = await db
|
||||||
|
.insert(cardTable)
|
||||||
|
.values({
|
||||||
|
name: name.trim(),
|
||||||
|
description: description?.trim() || '',
|
||||||
|
status: status || 'A fazer',
|
||||||
|
estimatedTime: hours || 0,
|
||||||
|
order: nextOrder,
|
||||||
|
projectId,
|
||||||
|
createdBy: session.user.id,
|
||||||
|
branch: 'main', // Valor padrão
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: 'Card criado com sucesso',
|
||||||
|
data: {
|
||||||
|
id: newCard.id,
|
||||||
|
name: newCard.name,
|
||||||
|
description: newCard.description,
|
||||||
|
status: newCard.status,
|
||||||
|
hours: newCard.estimatedTime,
|
||||||
|
timeSpent: 0,
|
||||||
|
order: newCard.order,
|
||||||
|
createdAt: newCard.createdAt,
|
||||||
|
updatedAt: newCard.updatedAt,
|
||||||
|
projectId: newCard.projectId,
|
||||||
|
createdBy: newCard.createdBy,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro detalhado ao criar card:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ success: false, message: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { cardCommentTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'Usuário não autenticado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { cardId, content } = body;
|
||||||
|
|
||||||
|
if (!cardId || !content) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'ID do card e conteúdo são obrigatórios' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (content.trim().length === 0) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'O comentário não pode estar vazio' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Criar o comentário
|
||||||
|
const [newComment] = await db
|
||||||
|
.insert(cardCommentTable)
|
||||||
|
.values({
|
||||||
|
cardId,
|
||||||
|
content: content.trim(),
|
||||||
|
userId: session.user.id,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: newComment,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar comentário:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import {
|
||||||
|
cardCommentTable,
|
||||||
|
organizationMemberTable,
|
||||||
|
projectTable,
|
||||||
|
} from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { and, eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function DELETE(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ commentId: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'Usuário não autenticado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { commentId } = await params;
|
||||||
|
|
||||||
|
if (!commentId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'ID do comentário é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar o comentário para verificar se existe
|
||||||
|
const [comment] = await db
|
||||||
|
.select({
|
||||||
|
id: cardCommentTable.id,
|
||||||
|
userId: cardCommentTable.userId,
|
||||||
|
cardId: cardCommentTable.cardId,
|
||||||
|
})
|
||||||
|
.from(cardCommentTable)
|
||||||
|
.where(eq(cardCommentTable.id, commentId));
|
||||||
|
|
||||||
|
if (!comment) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'Comentário não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário é o autor do comentário
|
||||||
|
const isAuthor = comment.userId === session.user.id;
|
||||||
|
|
||||||
|
// Se não for o autor, verificar se é admin da organização
|
||||||
|
let isAdmin = false;
|
||||||
|
if (!isAuthor) {
|
||||||
|
// Buscar o projeto do card para encontrar a organização
|
||||||
|
const [project] = await db
|
||||||
|
.select({
|
||||||
|
organizationId: projectTable.organizationId,
|
||||||
|
})
|
||||||
|
.from(projectTable)
|
||||||
|
.innerJoin(
|
||||||
|
cardCommentTable,
|
||||||
|
eq(projectTable.id, cardCommentTable.cardId)
|
||||||
|
)
|
||||||
|
.where(eq(cardCommentTable.id, commentId));
|
||||||
|
|
||||||
|
if (project?.organizationId) {
|
||||||
|
// Verificar se o usuário é admin da organização
|
||||||
|
const [member] = await db
|
||||||
|
.select({
|
||||||
|
role: organizationMemberTable.role,
|
||||||
|
})
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(
|
||||||
|
organizationMemberTable.organizationId,
|
||||||
|
project.organizationId
|
||||||
|
),
|
||||||
|
eq(organizationMemberTable.userId, session.user.id),
|
||||||
|
eq(organizationMemberTable.isActive, true)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
isAdmin = member?.role === 'admin' || member?.role === 'owner';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar permissões
|
||||||
|
if (!isAuthor && !isAdmin) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
success: false,
|
||||||
|
error: 'Você não tem permissão para deletar este comentário',
|
||||||
|
},
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Deletar o comentário
|
||||||
|
await db.delete(cardCommentTable).where(eq(cardCommentTable.id, commentId));
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: 'Comentário deletado com sucesso',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao deletar comentário:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { cardCommentTable, userTable } from '@/db/schema';
|
||||||
|
import { desc, eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ cardId: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const { cardId } = await params;
|
||||||
|
|
||||||
|
if (!cardId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'ID do card é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar comentários com informações do usuário, ordenados do mais novo para o mais antigo
|
||||||
|
const comments = await db
|
||||||
|
.select({
|
||||||
|
id: cardCommentTable.id,
|
||||||
|
content: cardCommentTable.content,
|
||||||
|
createdAt: cardCommentTable.createdAt,
|
||||||
|
updatedAt: cardCommentTable.updatedAt,
|
||||||
|
userId: cardCommentTable.userId,
|
||||||
|
userName: userTable.name,
|
||||||
|
userEmail: userTable.email,
|
||||||
|
})
|
||||||
|
.from(cardCommentTable)
|
||||||
|
.leftJoin(userTable, eq(cardCommentTable.userId, userTable.id))
|
||||||
|
.where(eq(cardCommentTable.cardId, cardId))
|
||||||
|
.orderBy(desc(cardCommentTable.createdAt));
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: comments,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar comentários:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ success: false, error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { projectUserTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
// POST - Adicionar membro ao projeto
|
||||||
|
export async function POST(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: projectId } = await params;
|
||||||
|
const body = await request.json();
|
||||||
|
const { userId } = body;
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'ID do usuário é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário já está no projeto
|
||||||
|
const existingMember = await db
|
||||||
|
.select()
|
||||||
|
.from(projectUserTable)
|
||||||
|
.where(
|
||||||
|
eq(projectUserTable.projectId, projectId) &&
|
||||||
|
eq(projectUserTable.userId, userId)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (existingMember.length > 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Usuário já é membro deste projeto' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adicionar usuário ao projeto
|
||||||
|
const [newMember] = await db
|
||||||
|
.insert(projectUserTable)
|
||||||
|
.values({
|
||||||
|
projectId,
|
||||||
|
userId,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
success: true,
|
||||||
|
data: newMember,
|
||||||
|
},
|
||||||
|
{ status: 201 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar membro ao projeto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DELETE - Remover membro do projeto
|
||||||
|
export async function DELETE(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: projectId } = await params;
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const userId = searchParams.get('userId');
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'ID do usuário é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remover usuário do projeto
|
||||||
|
await db
|
||||||
|
.delete(projectUserTable)
|
||||||
|
.where(
|
||||||
|
eq(projectUserTable.projectId, projectId) &&
|
||||||
|
eq(projectUserTable.userId, userId)
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
success: true,
|
||||||
|
message: 'Membro removido com sucesso',
|
||||||
|
},
|
||||||
|
{ status: 200 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao remover membro do projeto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,312 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import {
|
||||||
|
cardTable,
|
||||||
|
projectTable,
|
||||||
|
projectUserTable,
|
||||||
|
timeSpentTable,
|
||||||
|
userTable,
|
||||||
|
} from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: projectId } = await params;
|
||||||
|
|
||||||
|
// Buscar o projeto com todos os dados relacionados
|
||||||
|
const project = await db
|
||||||
|
.select({
|
||||||
|
id: projectTable.id,
|
||||||
|
name: projectTable.name,
|
||||||
|
description: projectTable.description,
|
||||||
|
status: projectTable.status,
|
||||||
|
projectUrl: projectTable.projectUrl,
|
||||||
|
createdAt: projectTable.createdAt,
|
||||||
|
initialDate: projectTable.initialDate,
|
||||||
|
finalDate: projectTable.finalDate,
|
||||||
|
updatedAt: projectTable.updatedAt,
|
||||||
|
organizationId: projectTable.organizationId,
|
||||||
|
userId: projectTable.userId,
|
||||||
|
})
|
||||||
|
.from(projectTable)
|
||||||
|
.where(eq(projectTable.id, projectId))
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (project.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Projeto não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const projectData = project[0];
|
||||||
|
|
||||||
|
// Buscar cards do projeto
|
||||||
|
const cards = await db
|
||||||
|
.select({
|
||||||
|
id: cardTable.id,
|
||||||
|
name: cardTable.name,
|
||||||
|
description: cardTable.description,
|
||||||
|
status: cardTable.status,
|
||||||
|
type: cardTable.type,
|
||||||
|
priority: cardTable.priority,
|
||||||
|
estimatedTime: cardTable.estimatedTime,
|
||||||
|
order: cardTable.order,
|
||||||
|
createdAt: cardTable.createdAt,
|
||||||
|
updatedAt: cardTable.updatedAt,
|
||||||
|
projectId: cardTable.projectId,
|
||||||
|
createdBy: cardTable.createdBy,
|
||||||
|
assignedTo: cardTable.assignedTo,
|
||||||
|
})
|
||||||
|
.from(cardTable)
|
||||||
|
.where(eq(cardTable.projectId, projectId))
|
||||||
|
.orderBy(cardTable.order);
|
||||||
|
|
||||||
|
// Buscar tempo gasto para cada card
|
||||||
|
const cardsWithTimeSpent = await Promise.all(
|
||||||
|
cards.map(async (card) => {
|
||||||
|
const timeSpent = await db
|
||||||
|
.select({
|
||||||
|
timeSpent: timeSpentTable.timeSpent,
|
||||||
|
})
|
||||||
|
.from(timeSpentTable)
|
||||||
|
.where(eq(timeSpentTable.cardId, card.id));
|
||||||
|
|
||||||
|
const totalTimeSpent = timeSpent.reduce((acc, record) => {
|
||||||
|
return acc + (record.timeSpent || 0);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: card.id,
|
||||||
|
name: card.name,
|
||||||
|
description: card.description,
|
||||||
|
status: card.status,
|
||||||
|
type: card.type,
|
||||||
|
priority: card.priority,
|
||||||
|
hours: card.estimatedTime || 0,
|
||||||
|
timeSpent: totalTimeSpent,
|
||||||
|
order: card.order,
|
||||||
|
createdAt: card.createdAt,
|
||||||
|
updatedAt: card.updatedAt,
|
||||||
|
projectId: card.projectId,
|
||||||
|
createdBy: card.createdBy,
|
||||||
|
assignedTo: card.assignedTo,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Buscar usuários do projeto
|
||||||
|
const projectUsers = await db
|
||||||
|
.select({
|
||||||
|
id: projectUserTable.id,
|
||||||
|
projectId: projectUserTable.projectId,
|
||||||
|
userId: projectUserTable.userId,
|
||||||
|
})
|
||||||
|
.from(projectUserTable)
|
||||||
|
.where(eq(projectUserTable.projectId, projectId));
|
||||||
|
|
||||||
|
// Buscar dados dos usuários
|
||||||
|
const users = await Promise.all(
|
||||||
|
projectUsers.map(async (projectUser) => {
|
||||||
|
const user = await db
|
||||||
|
.select({
|
||||||
|
id: userTable.id,
|
||||||
|
name: userTable.name,
|
||||||
|
email: userTable.email,
|
||||||
|
image: userTable.image,
|
||||||
|
})
|
||||||
|
.from(userTable)
|
||||||
|
.where(eq(userTable.id, projectUser.userId!))
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
return user[0];
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Formatar o projeto com os dados relacionados
|
||||||
|
const formattedProject = {
|
||||||
|
id: projectData.id,
|
||||||
|
name: projectData.name,
|
||||||
|
description: projectData.description,
|
||||||
|
status: projectData.status,
|
||||||
|
projectUrl: projectData.projectUrl,
|
||||||
|
createdAt: projectData.createdAt,
|
||||||
|
initialDate: projectData.initialDate,
|
||||||
|
finalDate: projectData.finalDate,
|
||||||
|
updatedAt: projectData.updatedAt,
|
||||||
|
organizationId: projectData.organizationId,
|
||||||
|
userId: projectData.userId,
|
||||||
|
cards: cardsWithTimeSpent,
|
||||||
|
users: users.filter(Boolean),
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: formattedProject,
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar projeto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: projectId } = await params;
|
||||||
|
const body = await request.json();
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
projectUrl,
|
||||||
|
status,
|
||||||
|
initialDate,
|
||||||
|
finalDate,
|
||||||
|
keyRepository,
|
||||||
|
repositoryUrl,
|
||||||
|
} = body;
|
||||||
|
|
||||||
|
// Verificar se o projeto existe
|
||||||
|
const existingProject = await db
|
||||||
|
.select()
|
||||||
|
.from(projectTable)
|
||||||
|
.where(eq(projectTable.id, projectId));
|
||||||
|
|
||||||
|
if (existingProject.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Projeto não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar projeto
|
||||||
|
const [updatedProject] = await db
|
||||||
|
.update(projectTable)
|
||||||
|
.set({
|
||||||
|
name: name || existingProject[0].name,
|
||||||
|
description:
|
||||||
|
description !== undefined
|
||||||
|
? description
|
||||||
|
: existingProject[0].description,
|
||||||
|
projectUrl:
|
||||||
|
projectUrl !== undefined ? projectUrl : existingProject[0].projectUrl,
|
||||||
|
status: status || existingProject[0].status,
|
||||||
|
initialDate: initialDate
|
||||||
|
? new Date(initialDate)
|
||||||
|
: existingProject[0].initialDate,
|
||||||
|
finalDate:
|
||||||
|
finalDate !== undefined
|
||||||
|
? finalDate
|
||||||
|
? new Date(finalDate)
|
||||||
|
: null
|
||||||
|
: existingProject[0].finalDate,
|
||||||
|
keyRepository:
|
||||||
|
keyRepository !== undefined
|
||||||
|
? keyRepository
|
||||||
|
: existingProject[0].keyRepository,
|
||||||
|
repositoryUrl:
|
||||||
|
repositoryUrl !== undefined
|
||||||
|
? repositoryUrl
|
||||||
|
: existingProject[0].repositoryUrl,
|
||||||
|
updatedAt: new Date(),
|
||||||
|
})
|
||||||
|
.where(eq(projectTable.id, projectId))
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: updatedProject,
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar projeto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: projectId } = await params;
|
||||||
|
|
||||||
|
// Verificar se o projeto existe
|
||||||
|
const existingProject = await db
|
||||||
|
.select()
|
||||||
|
.from(projectTable)
|
||||||
|
.where(eq(projectTable.id, projectId));
|
||||||
|
|
||||||
|
if (existingProject.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Projeto não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Deletar projeto
|
||||||
|
await db.delete(projectTable).where(eq(projectTable.id, projectId));
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: 'Projeto deletado com sucesso',
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao deletar projeto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import {
|
||||||
|
cardTable,
|
||||||
|
projectTable,
|
||||||
|
projectUserTable,
|
||||||
|
timeSpentTable,
|
||||||
|
userTable,
|
||||||
|
} from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { and, desc, eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const userId = searchParams.get('userId');
|
||||||
|
const organizationId = searchParams.get('organizationId');
|
||||||
|
const limit = searchParams.get('limit')
|
||||||
|
? parseInt(searchParams.get('limit')!)
|
||||||
|
: 50;
|
||||||
|
const offset = searchParams.get('offset')
|
||||||
|
? parseInt(searchParams.get('offset')!)
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Se userId não foi fornecido, usar o ID do usuário da sessão
|
||||||
|
const targetUserId = userId || session.user.id;
|
||||||
|
|
||||||
|
// Construir as condições de filtro
|
||||||
|
const conditions = [eq(projectUserTable.userId, targetUserId)];
|
||||||
|
if (organizationId) {
|
||||||
|
conditions.push(eq(projectTable.organizationId, organizationId));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar os projetos do usuário
|
||||||
|
const userProjects = await db
|
||||||
|
.select({
|
||||||
|
projectUserId: projectUserTable.id,
|
||||||
|
projectId: projectTable.id,
|
||||||
|
name: projectTable.name,
|
||||||
|
description: projectTable.description,
|
||||||
|
status: projectTable.status,
|
||||||
|
projectUrl: projectTable.projectUrl,
|
||||||
|
createdAt: projectTable.createdAt,
|
||||||
|
initialDate: projectTable.initialDate,
|
||||||
|
finalDate: projectTable.finalDate,
|
||||||
|
updatedAt: projectTable.updatedAt,
|
||||||
|
organizationId: projectTable.organizationId,
|
||||||
|
userId: userTable.id,
|
||||||
|
userName: userTable.name,
|
||||||
|
userEmail: userTable.email,
|
||||||
|
})
|
||||||
|
.from(projectUserTable)
|
||||||
|
.innerJoin(projectTable, eq(projectUserTable.projectId, projectTable.id))
|
||||||
|
.innerJoin(userTable, eq(projectUserTable.userId, userTable.id))
|
||||||
|
.where(and(...conditions))
|
||||||
|
.orderBy(desc(projectTable.createdAt))
|
||||||
|
.limit(limit)
|
||||||
|
.offset(offset);
|
||||||
|
|
||||||
|
// Para cada projeto, buscar os cards
|
||||||
|
const projectsWithCards = await Promise.all(
|
||||||
|
userProjects.map(async (project) => {
|
||||||
|
const cards = await db
|
||||||
|
.select({
|
||||||
|
id: cardTable.id,
|
||||||
|
status: cardTable.status,
|
||||||
|
estimatedTime: cardTable.estimatedTime,
|
||||||
|
name: cardTable.name,
|
||||||
|
order: cardTable.order,
|
||||||
|
})
|
||||||
|
.from(cardTable)
|
||||||
|
.where(eq(cardTable.projectId, project.projectId));
|
||||||
|
|
||||||
|
// Para cada card, buscar o tempo gasto
|
||||||
|
const cardsWithTimeSpent = await Promise.all(
|
||||||
|
cards.map(async (card) => {
|
||||||
|
const timeSpent = await db
|
||||||
|
.select({
|
||||||
|
timeSpent: timeSpentTable.timeSpent,
|
||||||
|
})
|
||||||
|
.from(timeSpentTable)
|
||||||
|
.where(eq(timeSpentTable.cardId, card.id));
|
||||||
|
|
||||||
|
// Calcular o total de tempo gasto para este card
|
||||||
|
const totalTimeSpent = timeSpent.reduce((acc, record) => {
|
||||||
|
return acc + (record.timeSpent || 0);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: card.id,
|
||||||
|
status: card.status,
|
||||||
|
hours: card.estimatedTime || 0,
|
||||||
|
timeSpent: totalTimeSpent,
|
||||||
|
name: card.name,
|
||||||
|
order: card.order,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Buscar todos os usuários do projeto
|
||||||
|
const projectUsers = await db
|
||||||
|
.select({
|
||||||
|
id: userTable.id,
|
||||||
|
name: userTable.name,
|
||||||
|
email: userTable.email,
|
||||||
|
image: userTable.image,
|
||||||
|
})
|
||||||
|
.from(projectUserTable)
|
||||||
|
.innerJoin(userTable, eq(projectUserTable.userId, userTable.id))
|
||||||
|
.where(eq(projectUserTable.projectId, project.projectId));
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: project.projectId,
|
||||||
|
projectUserId: project.projectUserId,
|
||||||
|
name: project.name,
|
||||||
|
description: project.description,
|
||||||
|
status: project.status,
|
||||||
|
projectUrl: project.projectUrl,
|
||||||
|
createdAt: project.createdAt,
|
||||||
|
initialDate: project.initialDate,
|
||||||
|
finalDate: project.finalDate,
|
||||||
|
updatedAt: project.updatedAt,
|
||||||
|
organizationId: project.organizationId,
|
||||||
|
users: projectUsers,
|
||||||
|
cards: cardsWithTimeSpent,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: projectsWithCards,
|
||||||
|
pagination: {
|
||||||
|
limit,
|
||||||
|
offset,
|
||||||
|
total: projectsWithCards.length,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar projetos:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
projectUrl,
|
||||||
|
initialDate,
|
||||||
|
finalDate,
|
||||||
|
organizationId,
|
||||||
|
keyRepository,
|
||||||
|
status,
|
||||||
|
repositoryUrl,
|
||||||
|
} = body;
|
||||||
|
|
||||||
|
// Validação básica
|
||||||
|
if (!name || !initialDate || !organizationId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Nome, data inicial e organização são obrigatórios' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Criar novo projeto
|
||||||
|
const [newProject] = await db
|
||||||
|
.insert(projectTable)
|
||||||
|
.values({
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
projectUrl: projectUrl || '',
|
||||||
|
initialDate: new Date(initialDate),
|
||||||
|
finalDate: finalDate ? new Date(finalDate) : null,
|
||||||
|
userId: session.user.id,
|
||||||
|
organizationId,
|
||||||
|
keyRepository: keyRepository || '',
|
||||||
|
status: status || 'active',
|
||||||
|
repositoryUrl: repositoryUrl || '',
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
// Criar relação na tabela project_user
|
||||||
|
const [projectUserRelation] = await db
|
||||||
|
.insert(projectUserTable)
|
||||||
|
.values({
|
||||||
|
projectId: newProject.id,
|
||||||
|
userId: session.user.id,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
...newProject,
|
||||||
|
projectUserId: projectUserRelation.id,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ status: 201 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar projeto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { timeSpentTable, userTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { desc, eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ cardId: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user?.id) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { cardId } = await params;
|
||||||
|
|
||||||
|
if (!cardId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'cardId é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar histórico de tempo gasto com dados do usuário
|
||||||
|
const timeSpentHistory = await db
|
||||||
|
.select({
|
||||||
|
id: timeSpentTable.id,
|
||||||
|
timeSpent: timeSpentTable.timeSpent,
|
||||||
|
createdAt: timeSpentTable.createdAt,
|
||||||
|
userId: timeSpentTable.userId,
|
||||||
|
userName: userTable.name,
|
||||||
|
userEmail: userTable.email,
|
||||||
|
})
|
||||||
|
.from(timeSpentTable)
|
||||||
|
.leftJoin(userTable, eq(timeSpentTable.userId, userTable.id))
|
||||||
|
.where(eq(timeSpentTable.cardId, cardId))
|
||||||
|
.orderBy(desc(timeSpentTable.createdAt));
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: timeSpentHistory,
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar histórico de tempo gasto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { organizationMemberTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { and, eq } from 'drizzle-orm';
|
||||||
|
import { headers } from 'next/headers';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function PUT(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string; memberId: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: await headers(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: organizationId, memberId } = await params;
|
||||||
|
const { role } = await request.json();
|
||||||
|
|
||||||
|
if (!role || !['admin', 'member'].includes(role)) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Role inválido. Deve ser "admin" ou "member"' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário atual é owner ou admin da organização
|
||||||
|
const currentUserMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, session.user.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (currentUserMembership.length === 0) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Usuário não é membro desta organização' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentUserRole = currentUserMembership[0].role;
|
||||||
|
|
||||||
|
if (currentUserRole !== 'owner' && currentUserRole !== 'admin') {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Apenas owners e admins podem alterar roles de membros' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o membro existe na organização
|
||||||
|
const targetMember = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, memberId)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (targetMember.length === 0) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Membro não encontrado nesta organização' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Impedir que admins alterem o role de owners
|
||||||
|
if (currentUserRole === 'admin' && targetMember[0].role === 'owner') {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Admins não podem alterar o role de owners' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Impedir que owners se tornem admins ou members
|
||||||
|
if (targetMember[0].role === 'owner' && role !== 'owner') {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Owners não podem ter seu role alterado' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar o role do membro
|
||||||
|
await db
|
||||||
|
.update(organizationMemberTable)
|
||||||
|
.set({ role })
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, memberId)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
message: 'Role do membro alterado com sucesso',
|
||||||
|
newRole: role,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao alterar role do membro:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,334 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import {
|
||||||
|
organizationMemberTable,
|
||||||
|
projectTable,
|
||||||
|
projectUserTable,
|
||||||
|
userTable,
|
||||||
|
} from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { corsHeaders } from '@/lib/cors';
|
||||||
|
import { and, eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
// GET - Listar membros da organização
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Não autorizado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: organizationId } = await params;
|
||||||
|
|
||||||
|
// Verificar se o usuário é membro da organização
|
||||||
|
const userMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, session.user.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (userMembership.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Acesso negado' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar todos os membros da organização
|
||||||
|
const members = await db
|
||||||
|
.select({
|
||||||
|
id: organizationMemberTable.id,
|
||||||
|
userId: organizationMemberTable.userId,
|
||||||
|
role: organizationMemberTable.role,
|
||||||
|
isActive: organizationMemberTable.isActive,
|
||||||
|
joinedAt: organizationMemberTable.joinedAt,
|
||||||
|
updatedAt: organizationMemberTable.updatedAt,
|
||||||
|
user: {
|
||||||
|
id: userTable.id,
|
||||||
|
name: userTable.name,
|
||||||
|
email: userTable.email,
|
||||||
|
image: userTable.image,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.innerJoin(userTable, eq(organizationMemberTable.userId, userTable.id))
|
||||||
|
.where(eq(organizationMemberTable.organizationId, organizationId));
|
||||||
|
|
||||||
|
const response = NextResponse.json({ data: members });
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar membros da organização:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST - Adicionar membro à organização
|
||||||
|
export async function POST(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Não autorizado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: organizationId } = await params;
|
||||||
|
const { userId, role = 'member' } = await request.json();
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'ID do usuário é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário atual tem permissão para adicionar membros
|
||||||
|
const currentUserMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, session.user.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (
|
||||||
|
currentUserMembership.length === 0 ||
|
||||||
|
!['owner', 'admin'].includes(currentUserMembership[0].role || '')
|
||||||
|
) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Permissão insuficiente' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário já é membro
|
||||||
|
const existingMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, userId)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (existingMembership.length > 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Usuário já é membro da organização' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adicionar membro
|
||||||
|
const [newMember] = await db
|
||||||
|
.insert(organizationMemberTable)
|
||||||
|
.values({
|
||||||
|
organizationId,
|
||||||
|
userId,
|
||||||
|
role,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
// Buscar todos os projetos da organização
|
||||||
|
const organizationProjects = await db
|
||||||
|
.select({
|
||||||
|
id: projectTable.id,
|
||||||
|
})
|
||||||
|
.from(projectTable)
|
||||||
|
.where(eq(projectTable.organizationId, organizationId));
|
||||||
|
|
||||||
|
const projectCount = organizationProjects.length;
|
||||||
|
|
||||||
|
// Adicionar o novo membro a todos os projetos da organização
|
||||||
|
let projectsToAdd: Array<{ projectId: string; userId: string }> = [];
|
||||||
|
|
||||||
|
if (organizationProjects.length > 0) {
|
||||||
|
const projectIds = organizationProjects.map((project) => project.id);
|
||||||
|
|
||||||
|
// Verificar quais projetos o usuário já está
|
||||||
|
const existingProjectMemberships = await db
|
||||||
|
.select({
|
||||||
|
projectId: projectUserTable.projectId,
|
||||||
|
})
|
||||||
|
.from(projectUserTable)
|
||||||
|
.where(eq(projectUserTable.userId, userId));
|
||||||
|
|
||||||
|
const existingProjectIds = existingProjectMemberships.map(
|
||||||
|
(membership) => membership.projectId
|
||||||
|
);
|
||||||
|
|
||||||
|
// Filtrar projetos onde o usuário ainda não está
|
||||||
|
projectsToAdd = projectIds
|
||||||
|
.filter((projectId) => !existingProjectIds.includes(projectId))
|
||||||
|
.map((projectId) => ({
|
||||||
|
projectId,
|
||||||
|
userId,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (projectsToAdd.length > 0) {
|
||||||
|
await db.insert(projectUserTable).values(projectsToAdd);
|
||||||
|
console.log(
|
||||||
|
`Usuário ${userId} adicionado a ${projectsToAdd.length} projetos da organização ${organizationId}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
data: newMember,
|
||||||
|
projectCount,
|
||||||
|
projectsAdded: projectsToAdd.length,
|
||||||
|
},
|
||||||
|
{ status: 201 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar membro:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DELETE - Remover membro da organização
|
||||||
|
export async function DELETE(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Não autorizado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: organizationId } = await params;
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const memberId = searchParams.get('memberId');
|
||||||
|
|
||||||
|
if (!memberId) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'ID do membro é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário atual tem permissão para remover membros
|
||||||
|
const currentUserMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, session.user.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (
|
||||||
|
currentUserMembership.length === 0 ||
|
||||||
|
!['owner', 'admin'].includes(currentUserMembership[0].role || '')
|
||||||
|
) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Permissão insuficiente' },
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o membro existe
|
||||||
|
const memberToRemove = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.id, memberId)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (memberToRemove.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Membro não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Não permitir que o owner remova a si mesmo
|
||||||
|
if (
|
||||||
|
memberToRemove[0].role === 'owner' &&
|
||||||
|
memberToRemove[0].userId === session.user.id
|
||||||
|
) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Não é possível remover o proprietário da organização' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remover membro
|
||||||
|
await db
|
||||||
|
.delete(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.id, memberId)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
message: 'Membro removido com sucesso',
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao remover membro:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { organizationMemberTable, organizationTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { and, eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
// PUT - Editar organização
|
||||||
|
export async function PUT(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: organizationId } = await params;
|
||||||
|
const userId = session.user.id;
|
||||||
|
const { name, description } = await request.json();
|
||||||
|
|
||||||
|
// Verificar se a organização existe
|
||||||
|
const organization = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationTable)
|
||||||
|
.where(eq(organizationTable.id, organizationId))
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (organization.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Organização não encontrada' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário é owner ou admin da organização
|
||||||
|
const userMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, userId)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (
|
||||||
|
userMembership.length === 0 ||
|
||||||
|
!['owner', 'admin'].includes(userMembership[0].role || '')
|
||||||
|
) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
error:
|
||||||
|
'Permissão insuficiente. Apenas owners e admins podem editar organizações.',
|
||||||
|
},
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar dados de entrada
|
||||||
|
if (!name || name.trim().length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Nome da organização é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar a organização
|
||||||
|
const [updatedOrganization] = await db
|
||||||
|
.update(organizationTable)
|
||||||
|
.set({
|
||||||
|
name: name.trim(),
|
||||||
|
description: description?.trim() || null,
|
||||||
|
updatedAt: new Date(),
|
||||||
|
})
|
||||||
|
.where(eq(organizationTable.id, organizationId))
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: updatedOrganization,
|
||||||
|
message: 'Organização atualizada com sucesso',
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar organização:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DELETE - Remover organização
|
||||||
|
export async function DELETE(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id: organizationId } = await params;
|
||||||
|
const userId = session.user.id;
|
||||||
|
|
||||||
|
// Verificar se a organização existe
|
||||||
|
const organization = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationTable)
|
||||||
|
.where(eq(organizationTable.id, organizationId))
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (organization.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Organização não encontrada' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o usuário é owner ou admin da organização
|
||||||
|
const userMembership = await db
|
||||||
|
.select()
|
||||||
|
.from(organizationMemberTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(organizationMemberTable.organizationId, organizationId),
|
||||||
|
eq(organizationMemberTable.userId, userId)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
if (
|
||||||
|
userMembership.length === 0 ||
|
||||||
|
!['owner', 'admin'].includes(userMembership[0].role || '')
|
||||||
|
) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{
|
||||||
|
error:
|
||||||
|
'Permissão insuficiente. Apenas owners e admins podem remover organizações.',
|
||||||
|
},
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remover a organização (isso também removerá todos os membros devido ao cascade)
|
||||||
|
await db
|
||||||
|
.delete(organizationTable)
|
||||||
|
.where(eq(organizationTable.id, organizationId));
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: 'Organização removida com sucesso',
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao remover organização:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { organizationMemberTable, organizationTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
// GET - Listar organizações do usuário
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const userId = session.user.id;
|
||||||
|
|
||||||
|
// Buscar organizações onde o usuário é membro
|
||||||
|
const organizations = await db
|
||||||
|
.select({
|
||||||
|
id: organizationTable.id,
|
||||||
|
name: organizationTable.name,
|
||||||
|
description: organizationTable.description,
|
||||||
|
slug: organizationTable.slug,
|
||||||
|
logo: organizationTable.logo,
|
||||||
|
isActive: organizationTable.isActive,
|
||||||
|
createdAt: organizationTable.createdAt,
|
||||||
|
updatedAt: organizationTable.updatedAt,
|
||||||
|
role: organizationMemberTable.role,
|
||||||
|
})
|
||||||
|
.from(organizationTable)
|
||||||
|
.innerJoin(
|
||||||
|
organizationMemberTable,
|
||||||
|
eq(organizationTable.id, organizationMemberTable.organizationId)
|
||||||
|
)
|
||||||
|
.where(eq(organizationMemberTable.userId, userId));
|
||||||
|
const response = NextResponse.json({ data: organizations });
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar organizações:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST - Criar nova organização
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { name, description, slug } = await request.json();
|
||||||
|
const userId = session.user.id;
|
||||||
|
|
||||||
|
if (!name || !slug) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Nome e slug são obrigatórios' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Criar organização
|
||||||
|
const [organization] = await db
|
||||||
|
.insert(organizationTable)
|
||||||
|
.values({
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
slug,
|
||||||
|
createdBy: userId,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
// Adicionar criador como owner da organização
|
||||||
|
await db.insert(organizationMemberTable).values({
|
||||||
|
organizationId: organization.id,
|
||||||
|
userId,
|
||||||
|
role: 'owner',
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = NextResponse.json({ data: organization }, { status: 201 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar organização:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { timeSpentTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user?.id) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { cardId, timeSpent } = await request.json();
|
||||||
|
|
||||||
|
if (!cardId || !timeSpent) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'cardId e timeSpent são obrigatórios' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Salvar o tempo gasto em segundos
|
||||||
|
const newTimeSpent = await db
|
||||||
|
.insert(timeSpentTable)
|
||||||
|
.values({
|
||||||
|
cardId,
|
||||||
|
timeSpent,
|
||||||
|
userId: session.user.id,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: newTimeSpent[0],
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao salvar tempo gasto:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { cardTable, timeSpentTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function PUT(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ success: false, message: 'Não autorizado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
status,
|
||||||
|
hours,
|
||||||
|
timeSpent,
|
||||||
|
isManualTimeAddition,
|
||||||
|
} = body;
|
||||||
|
|
||||||
|
// Validar dados obrigatórios
|
||||||
|
if (!id || !name || !status) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ success: false, message: 'Dados obrigatórios não fornecidos' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar o card no banco de dados
|
||||||
|
const updateData: {
|
||||||
|
updatedAt: Date;
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
status?:
|
||||||
|
| 'A fazer'
|
||||||
|
| 'Em progresso'
|
||||||
|
| 'Em revisão'
|
||||||
|
| 'Testando'
|
||||||
|
| 'Concluido';
|
||||||
|
estimatedTime?: number;
|
||||||
|
} = {
|
||||||
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Adicionar apenas os campos que foram enviados
|
||||||
|
if (name !== undefined) updateData.name = name;
|
||||||
|
if (description !== undefined) updateData.description = description;
|
||||||
|
if (status !== undefined)
|
||||||
|
updateData.status = status as
|
||||||
|
| 'A fazer'
|
||||||
|
| 'Em progresso'
|
||||||
|
| 'Em revisão'
|
||||||
|
| 'Testando'
|
||||||
|
| 'Concluido';
|
||||||
|
if (hours !== undefined) updateData.estimatedTime = hours || 0;
|
||||||
|
|
||||||
|
const updatedCard = await db
|
||||||
|
.update(cardTable)
|
||||||
|
.set(updateData)
|
||||||
|
.where(eq(cardTable.id, id))
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
if (updatedCard.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ success: false, message: 'Card não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Se timeSpent foi fornecido, criar um novo registro na tabela timeSpentTable
|
||||||
|
if (timeSpent !== undefined && isManualTimeAddition) {
|
||||||
|
// Sempre criar um novo registro para adições manuais de tempo
|
||||||
|
await db.insert(timeSpentTable).values({
|
||||||
|
cardId: id,
|
||||||
|
timeSpent: timeSpent || 0,
|
||||||
|
userId: session.user.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: 'Card atualizado com sucesso',
|
||||||
|
data: updatedCard[0],
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro detalhado ao atualizar card:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ success: false, message: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { cardTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function PUT(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { cardOrders } = body;
|
||||||
|
|
||||||
|
if (!cardOrders || !Array.isArray(cardOrders)) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'cardOrders é obrigatório e deve ser um array' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar a ordem dos cards no banco de dados
|
||||||
|
const updatedCards = [];
|
||||||
|
for (const { cardId, order } of cardOrders) {
|
||||||
|
const [updatedCard] = await db
|
||||||
|
.update(cardTable)
|
||||||
|
.set({
|
||||||
|
order,
|
||||||
|
updatedAt: new Date(),
|
||||||
|
})
|
||||||
|
.where(eq(cardTable.id, cardId))
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
if (updatedCard) {
|
||||||
|
updatedCards.push(updatedCard);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: updatedCards,
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar ordem dos cards:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { cardTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
|
||||||
|
export async function PUT(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
try {
|
||||||
|
// Verificar autenticação
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { cardId, newStatus } = body;
|
||||||
|
|
||||||
|
if (!cardId || !newStatus) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'cardId e newStatus são obrigatórios' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar se o card existe
|
||||||
|
const existingCard = await db
|
||||||
|
.select()
|
||||||
|
.from(cardTable)
|
||||||
|
.where(eq(cardTable.id, cardId));
|
||||||
|
|
||||||
|
if (existingCard.length === 0) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Card não encontrado' },
|
||||||
|
{ status: 404 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atualizar o status do card
|
||||||
|
const [updatedCard] = await db
|
||||||
|
.update(cardTable)
|
||||||
|
.set({
|
||||||
|
status: newStatus,
|
||||||
|
updatedAt: new Date(),
|
||||||
|
})
|
||||||
|
.where(eq(cardTable.id, cardId))
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
const response = NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: updatedCard,
|
||||||
|
});
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao atualizar status do card:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { userTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { corsHeaders, handleCors } from '@/lib/cors';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
// GET - Listar todos os usuários ativos
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
// Verificar se é uma requisição OPTIONS
|
||||||
|
const corsResponse = handleCors(request);
|
||||||
|
if (corsResponse) return corsResponse;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Não autorizado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar todos os usuários ativos
|
||||||
|
const users = await db
|
||||||
|
.select({
|
||||||
|
id: userTable.id,
|
||||||
|
name: userTable.name,
|
||||||
|
email: userTable.email,
|
||||||
|
image: userTable.image,
|
||||||
|
isActive: userTable.isActive,
|
||||||
|
})
|
||||||
|
.from(userTable)
|
||||||
|
.where(eq(userTable.isActive, true))
|
||||||
|
.orderBy(userTable.name);
|
||||||
|
|
||||||
|
const response = NextResponse.json({ data: users });
|
||||||
|
return corsHeaders(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar usuários:', error);
|
||||||
|
const response = NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
return corsHeaders(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { isEmailAllowed } from '@/lib/email-validation';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const { email, organizationId } = await request.json();
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Email é obrigatório' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const isAllowed = await isEmailAllowed(email, organizationId);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
isAllowed,
|
||||||
|
message: isAllowed
|
||||||
|
? 'Email permitido'
|
||||||
|
: 'Email não permitido. Apenas emails do domínio jurunense.com.br ou emails externos previamente autorizados são aceitos.',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao validar email:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { isEmailAllowed } from '@/lib/email-validation';
|
||||||
|
import { headers } from 'next/headers';
|
||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function POST() {
|
||||||
|
try {
|
||||||
|
// Verificar se o usuário está autenticado
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: await headers(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user?.email) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Usuário não autenticado' },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const email = session.user.email;
|
||||||
|
const isAllowed = await isEmailAllowed(email);
|
||||||
|
|
||||||
|
if (!isAllowed) {
|
||||||
|
// Se o email não for permitido, invalidar a sessão
|
||||||
|
await authClient.signOut();
|
||||||
|
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
error:
|
||||||
|
'Email não permitido. Apenas emails do domínio jurunense.com.br ou emails externos previamente autorizados são aceitos.',
|
||||||
|
isAllowed: false,
|
||||||
|
},
|
||||||
|
{ status: 403 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
message: 'Email permitido',
|
||||||
|
isAllowed: true,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao validar email do login social:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { allowedEmailTable, userTable } from '@/db/schema';
|
||||||
|
import { auth } from '@/lib/auth';
|
||||||
|
import { and, eq, inArray } from 'drizzle-orm';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
const ALLOWED_DOMAIN = 'jurunense.com.br';
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const session = await auth.api.getSession({
|
||||||
|
headers: request.headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { organizationId, userIds } = await request.json();
|
||||||
|
|
||||||
|
if (!organizationId || !userIds || !Array.isArray(userIds)) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'organizationId e userIds são obrigatórios' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buscar usuários pelos IDs
|
||||||
|
const users = await db
|
||||||
|
.select({
|
||||||
|
id: userTable.id,
|
||||||
|
name: userTable.name,
|
||||||
|
email: userTable.email,
|
||||||
|
image: userTable.image,
|
||||||
|
})
|
||||||
|
.from(userTable)
|
||||||
|
.where(and(inArray(userTable.id, userIds), eq(userTable.isActive, true)));
|
||||||
|
|
||||||
|
// Buscar emails permitidos para a organização
|
||||||
|
const allowedEmails = await db
|
||||||
|
.select({
|
||||||
|
email: allowedEmailTable.email,
|
||||||
|
})
|
||||||
|
.from(allowedEmailTable)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(allowedEmailTable.organizationId, organizationId),
|
||||||
|
eq(allowedEmailTable.isActive, true)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const allowedEmailSet = new Set(
|
||||||
|
allowedEmails.map((item) => item.email.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
// Filtrar usuários que têm emails permitidos
|
||||||
|
const validUsers = users.filter((user) => {
|
||||||
|
const email = user.email.toLowerCase();
|
||||||
|
const domain = email.split('@')[1];
|
||||||
|
|
||||||
|
// Se é do domínio jurunense.com.br, sempre permitido
|
||||||
|
if (domain === ALLOWED_DOMAIN) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Se está na lista de emails permitidos
|
||||||
|
return allowedEmailSet.has(email);
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
data: validUsers.map((user) => user.id),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao validar emails de usuários:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erro interno do servidor' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export default function AuthCallback() {
|
||||||
|
const [isValidating, setIsValidating] = useState(true);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const validateUser = async () => {
|
||||||
|
try {
|
||||||
|
// Aguardar um pouco para garantir que a sessão foi criada
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
|
||||||
|
const session = await authClient.getSession();
|
||||||
|
|
||||||
|
if (!session?.data?.user?.email) {
|
||||||
|
setError('Erro ao obter dados do usuário');
|
||||||
|
setIsValidating(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar se o email é permitido
|
||||||
|
const response = await fetch('/api/validate-email', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: session.data.user.email,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!data.isAllowed) {
|
||||||
|
// Se o email não for permitido, fazer logout e mostrar erro
|
||||||
|
await authClient.signOut();
|
||||||
|
setError(data.message);
|
||||||
|
setIsValidating(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Se o email for permitido, redirecionar para o dashboard
|
||||||
|
router.push('/dashboard');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro na validação:', error);
|
||||||
|
setError('Erro interno do servidor');
|
||||||
|
setIsValidating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
validateUser();
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
|
if (isValidating) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
|
||||||
|
<p className="text-muted-foreground">Validando acesso...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center max-w-md mx-auto p-6">
|
||||||
|
<div className="text-red-500 mb-4">
|
||||||
|
<svg
|
||||||
|
className="w-16 h-16 mx-auto"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-red-600 mb-2">
|
||||||
|
Acesso Negado
|
||||||
|
</h1>
|
||||||
|
<p className="text-muted-foreground mb-6">{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => router.push('/login')}
|
||||||
|
className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
Voltar ao Login
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,122 @@
|
||||||
|
@import 'tailwindcss';
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.65rem;
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--primary: oklch(0.623 0.214 259.815);
|
||||||
|
--primary-foreground: oklch(0.97 0.014 254.604);
|
||||||
|
--secondary: oklch(0.967 0.001 286.375);
|
||||||
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--muted: oklch(0.967 0.001 286.375);
|
||||||
|
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||||
|
--accent: oklch(0.967 0.001 286.375);
|
||||||
|
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.92 0.004 286.32);
|
||||||
|
--input: oklch(0.92 0.004 286.32);
|
||||||
|
--ring: oklch(0.623 0.214 259.815);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--sidebar-primary: oklch(0.623 0.214 259.815);
|
||||||
|
--sidebar-primary-foreground: oklch(0.97 0.014 254.604);
|
||||||
|
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||||
|
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||||
|
--sidebar-ring: oklch(0.623 0.214 259.815);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.141 0.005 285.823);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.21 0.006 285.885);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.21 0.006 285.885);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.546 0.245 262.881);
|
||||||
|
--primary-foreground: oklch(0.379 0.146 265.522);
|
||||||
|
--secondary: oklch(0.274 0.006 286.033);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.274 0.006 286.033);
|
||||||
|
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||||
|
--accent: oklch(0.274 0.006 286.033);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.21 0.006 285.885);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.546 0.245 262.881);
|
||||||
|
--sidebar-primary-foreground: oklch(0.379 0.146 265.522);
|
||||||
|
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.488 0.243 264.376);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { ThemeProvider } from '@/components/theme-provider';
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import { Geist, Geist_Mono } from 'next/font/google';
|
||||||
|
import { Toaster } from 'sonner';
|
||||||
|
import './globals.css';
|
||||||
|
|
||||||
|
const geistSans = Geist({
|
||||||
|
variable: '--font-geist-sans',
|
||||||
|
subsets: ['latin'],
|
||||||
|
});
|
||||||
|
|
||||||
|
const geistMono = Geist_Mono({
|
||||||
|
variable: '--font-geist-mono',
|
||||||
|
subsets: ['latin'],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Gestão de Projetos',
|
||||||
|
description: 'Ferramenta de gestão de projetos',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="pt-BR" suppressHydrationWarning>
|
||||||
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
|
<ThemeProvider
|
||||||
|
attribute="class"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
disableTransitionOnChange
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<Toaster />
|
||||||
|
</ThemeProvider>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { AlertCircle, Github } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export function SignIn() {
|
||||||
|
const [emailError, setEmailError] = useState('');
|
||||||
|
|
||||||
|
const handleGitHubLogin = async () => {
|
||||||
|
try {
|
||||||
|
setEmailError(''); // Limpa erros anteriores
|
||||||
|
|
||||||
|
await authClient.signIn.social({
|
||||||
|
provider: 'github',
|
||||||
|
callbackURL: '/auth/callback', // Redirecionar para nossa página de callback
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro no login:', error);
|
||||||
|
if (
|
||||||
|
error instanceof Error &&
|
||||||
|
error.message.includes('Email não permitido')
|
||||||
|
) {
|
||||||
|
setEmailError(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<Card className="w-full">
|
||||||
|
<div className="flex flex-col gap-5 p-5">
|
||||||
|
<h2 className="text-lg font-semibold">Login</h2>
|
||||||
|
|
||||||
|
{/* Mensagem de erro se houver */}
|
||||||
|
{emailError && (
|
||||||
|
<div className="flex items-center gap-2 text-sm text-red-600 p-3 bg-red-50 border border-red-200 rounded-md">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
{emailError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Button
|
||||||
|
onClick={handleGitHubLogin}
|
||||||
|
type="button"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Github />
|
||||||
|
Entrar com GitHub
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="text-xs text-muted-foreground text-center">
|
||||||
|
<p>
|
||||||
|
Apenas emails do domínio <strong>jurunense.com.br</strong> ou
|
||||||
|
emails externos previamente autorizados são aceitos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
'use client';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { SignIn } from './components/sign-in';
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex w-full flex-col gap-6 p-5 items-center justify-center">
|
||||||
|
<div className="w-1/2">
|
||||||
|
<Tabs defaultValue="login">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="login">Login</TabsTrigger>
|
||||||
|
<TabsTrigger value="register">Registrar</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="login" className="w-full">
|
||||||
|
<SignIn />
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
'use client';
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkSession = async () => {
|
||||||
|
try {
|
||||||
|
const session = await authClient.getSession();
|
||||||
|
|
||||||
|
if (session?.data?.user) {
|
||||||
|
router.push('/dashboard');
|
||||||
|
} else {
|
||||||
|
router.push('/login');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro:', error);
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push('/login');
|
||||||
|
}, 1000);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const timer = setTimeout(checkSession, 100);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen w-screen items-center justify-center">
|
||||||
|
<div className="flex flex-col items-center justify-center gap-5">
|
||||||
|
<Image src="/loading.gif" alt="loading" width={100} height={100} />
|
||||||
|
<p className="text-muted-foreground">Carregando...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { authClient } from '@/lib/auth-client';
|
||||||
|
import { User } from '@/types/User';
|
||||||
|
import { LogOutIcon } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from './ui/dropdown-menu';
|
||||||
|
|
||||||
|
export default function AvatarUsuario() {
|
||||||
|
const [user, setUser] = useState<User | null>(null);
|
||||||
|
const router = useRouter();
|
||||||
|
useEffect(() => {
|
||||||
|
const getUserData = async () => {
|
||||||
|
const session = await authClient.getSession();
|
||||||
|
if (session?.data?.user) {
|
||||||
|
setUser(session.data.user);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getUserData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSignOut = () => {
|
||||||
|
authClient.signOut();
|
||||||
|
router.push('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild className="cursor-pointer">
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage src={user?.image || ''} />
|
||||||
|
<AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
<DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem className="cursor-pointer" onClick={handleSignOut}>
|
||||||
|
<Button variant="destructive" className="w-full justify-around">
|
||||||
|
Sair
|
||||||
|
<LogOutIcon className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
'use client';
|
||||||
|
import { Search } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Input } from './ui/input';
|
||||||
|
|
||||||
|
interface BarraBuscaProps {
|
||||||
|
searchTerm: string;
|
||||||
|
onSearchChange: (searchTerm: string) => void;
|
||||||
|
placeHolder: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BarraBusca({
|
||||||
|
searchTerm,
|
||||||
|
onSearchChange,
|
||||||
|
placeHolder,
|
||||||
|
}: BarraBuscaProps) {
|
||||||
|
const [search, setSearch] = useState(searchTerm);
|
||||||
|
|
||||||
|
function handdleSearch(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const newSearchTerm = e.target.value;
|
||||||
|
setSearch(newSearchTerm);
|
||||||
|
onSearchChange(newSearchTerm);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||||
|
<Input
|
||||||
|
placeholder={placeHolder}
|
||||||
|
value={search}
|
||||||
|
onChange={handdleSearch}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ChevronDownIcon } from 'lucide-react';
|
||||||
|
import { forwardRef, useImperativeHandle, useState } from 'react';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Calendar } from '@/components/ui/calendar';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/popover';
|
||||||
|
|
||||||
|
interface CalendarioProps {
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Calendario = forwardRef<
|
||||||
|
{ getValue: () => Date | undefined },
|
||||||
|
CalendarioProps
|
||||||
|
>(({ label }, ref) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [date, setDate] = useState<Date | undefined>(undefined);
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => ({
|
||||||
|
getValue: () => date,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<Label htmlFor="date" className="px-1">
|
||||||
|
{label}
|
||||||
|
</Label>
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
id="date"
|
||||||
|
className="w-48 justify-between font-normal"
|
||||||
|
>
|
||||||
|
{date ? date.toLocaleDateString() : 'Select date'}
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto overflow-hidden p-0" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={date}
|
||||||
|
captionLayout="dropdown"
|
||||||
|
onSelect={(date) => {
|
||||||
|
setDate(date);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Calendario.displayName = 'Calendario';
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import { AspectRatio } from '@/components/ui/aspect-ratio';
|
||||||
|
import { formatTimeSpent } from '@/utils/timeUtils';
|
||||||
|
import Loading from './Loading';
|
||||||
|
|
||||||
|
interface CardDashProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
value: number;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
calculate?: () => number | string;
|
||||||
|
isLoading?: boolean;
|
||||||
|
valueProject?: number;
|
||||||
|
caculavel?: boolean;
|
||||||
|
formatAsTime?: boolean; // Nova prop para formatar como tempo
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CardDash({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon,
|
||||||
|
value,
|
||||||
|
calculate,
|
||||||
|
isLoading,
|
||||||
|
valueProject,
|
||||||
|
caculavel,
|
||||||
|
formatAsTime = false,
|
||||||
|
}: CardDashProps) {
|
||||||
|
function calculateValue(valor: number, valorProjetado: number) {
|
||||||
|
if (valorProjetado > 0) {
|
||||||
|
// Se formatAsTime é true, o valor está em segundos, precisa converter para horas
|
||||||
|
const valorEmHoras = formatAsTime ? valor / 3600 : valor;
|
||||||
|
|
||||||
|
if (valorEmHoras >= valorProjetado) {
|
||||||
|
return 'text-red-500';
|
||||||
|
} else {
|
||||||
|
return 'text-green-500';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 'text-foreground';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg mt-3">
|
||||||
|
{isLoading ? (
|
||||||
|
<Loading className="w-full h-full" width={20} height={20} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-col items-center justify-center h-full gap-2">
|
||||||
|
<div className="flex items-center justify-around w-full">
|
||||||
|
<p className="text-sm font-bold">{title}</p>
|
||||||
|
<div>{icon}</div>
|
||||||
|
</div>
|
||||||
|
{caculavel ? (
|
||||||
|
<div className={calculateValue(value, valueProject || 0)}>
|
||||||
|
{formatAsTime ? formatTimeSpent(value) : value}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
formatAsTime ? calculateValue(value, valueProject || 0) : ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{formatAsTime ? formatTimeSpent(value) : value}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{calculate?.()} {description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</AspectRatio>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { Building, Github, Settings } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from './ui/dropdown-menu';
|
||||||
|
|
||||||
|
export default function Configuracoes() {
|
||||||
|
const router = useRouter();
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Settings className="hover:animate-spin cursor-pointer" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() => router.push('/organizations')}
|
||||||
|
>
|
||||||
|
<Building />
|
||||||
|
<span className="text-sm">Organizações</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem className="cursor-pointer">
|
||||||
|
<Github />
|
||||||
|
GitHub
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
'use client';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { useOrganization } from '@/context/organizationContext';
|
||||||
|
import useAuth from '@/hook/useAuth';
|
||||||
|
import { useTheme } from 'next-themes';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import AvatarUsuario from './AvatarUsuario';
|
||||||
|
import { ButtonToogleTheme } from './buttonToogleTheme';
|
||||||
|
import Configuracoes from './Configuracoes';
|
||||||
|
import TimerDisplay from './TimerDisplay';
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const { isAuthenticated } = useAuth();
|
||||||
|
const { theme } = useTheme();
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const {
|
||||||
|
selectedOrganization,
|
||||||
|
setSelectedOrganization,
|
||||||
|
organizations,
|
||||||
|
setOrganizations,
|
||||||
|
} = useOrganization();
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [isLoadingOrgs, setIsLoadingOrgs] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
const scrollTop = window.scrollY;
|
||||||
|
setIsScrolled(scrollTop > 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Verificar se deve redirecionar do projeto
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedOrganization && pathname.startsWith('/project/')) {
|
||||||
|
// Verificar se deve redirecionar do projeto
|
||||||
|
if (!selectedOrganization) {
|
||||||
|
router.push('/dashboard');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [selectedOrganization, pathname, router]);
|
||||||
|
|
||||||
|
// Carregar organizações quando o usuário estiver autenticado
|
||||||
|
useEffect(() => {
|
||||||
|
const loadOrganizations = async () => {
|
||||||
|
if (isLoadingOrgs) return;
|
||||||
|
|
||||||
|
setIsLoadingOrgs(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/organizations', {
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
const orgs = data.data || [];
|
||||||
|
|
||||||
|
setOrganizations(orgs);
|
||||||
|
|
||||||
|
// A seleção da organização agora é gerenciada pelo contexto
|
||||||
|
// que automaticamente restaura a organização salva ou seleciona a primeira
|
||||||
|
} else {
|
||||||
|
console.error('Erro ao carregar organizações:', response.status);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao carregar organizações:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingOrgs(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Carregar organizações apenas se o usuário estiver autenticado e não houver organizações carregadas
|
||||||
|
if (isAuthenticated && organizations.length === 0) {
|
||||||
|
loadOrganizations();
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, organizations.length, setOrganizations, isLoadingOrgs]);
|
||||||
|
|
||||||
|
const handleOrganizationChange = (organizationId: string) => {
|
||||||
|
const org = organizations.find((o) => o.id === organizationId);
|
||||||
|
if (org) {
|
||||||
|
setSelectedOrganization(org);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const logo = theme === 'dark' ? '/logo.png' : '/logo2.png';
|
||||||
|
|
||||||
|
if (isAuthenticated) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<header
|
||||||
|
className={`container fixed top-0 left-0 right-0 z-50 mx-auto px-4 py-4 flex justify-between items-center transition-all duration-300 ${
|
||||||
|
isScrolled
|
||||||
|
? 'bg-background/70 backdrop-blur-sm shadow-sm'
|
||||||
|
: 'bg-background'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Link href="/dashboard">
|
||||||
|
<Image
|
||||||
|
src={logo}
|
||||||
|
alt="logo"
|
||||||
|
width={100}
|
||||||
|
height={100}
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
<div className="flex items-center gap-5">
|
||||||
|
{/* Temporizador */}
|
||||||
|
<TimerDisplay />
|
||||||
|
|
||||||
|
{/* Seletor de Organização */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Select
|
||||||
|
value={selectedOrganization?.id || ''}
|
||||||
|
onValueChange={handleOrganizationChange}
|
||||||
|
disabled={isLoadingOrgs}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-48">
|
||||||
|
<SelectValue
|
||||||
|
placeholder={
|
||||||
|
isLoadingOrgs
|
||||||
|
? 'Carregando organizações...'
|
||||||
|
: 'Selecione uma organização'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{organizations.length === 0 && !isLoadingOrgs ? (
|
||||||
|
<div className="px-2 py-1 text-sm text-muted-foreground">
|
||||||
|
Nenhuma organização encontrada
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
organizations.map((org) => (
|
||||||
|
<SelectItem key={org.id} value={org.id}>
|
||||||
|
{org.name}
|
||||||
|
</SelectItem>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AvatarUsuario />
|
||||||
|
<Configuracoes />
|
||||||
|
<ButtonToogleTheme />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div className="h-[4.375rem]"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="flex justify-between items-center p-4">
|
||||||
|
<ButtonToogleTheme />
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
interface LoadingProps {
|
||||||
|
className?: string;
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Loading({
|
||||||
|
className,
|
||||||
|
width = 100,
|
||||||
|
height = 100,
|
||||||
|
}: LoadingProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col items-center justify-center gap-5',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/loading.webp"
|
||||||
|
alt="loading"
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
unoptimized
|
||||||
|
/>
|
||||||
|
<p className="text-muted-foreground">Carregando...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,287 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from '@/components/ui/alert-dialog';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/components/ui/card';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { AlertCircle, Mail, Plus, Trash2 } from 'lucide-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface AllowedEmail {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
isActive: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
createdBy: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OrganizationAllowedEmailsManagerProps {
|
||||||
|
organizationId: string;
|
||||||
|
organizationName: string;
|
||||||
|
onEmailListChanged?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OrganizationAllowedEmailsManager({
|
||||||
|
organizationId,
|
||||||
|
organizationName,
|
||||||
|
onEmailListChanged,
|
||||||
|
}: OrganizationAllowedEmailsManagerProps) {
|
||||||
|
const [allowedEmails, setAllowedEmails] = useState<AllowedEmail[]>([]);
|
||||||
|
const [newEmail, setNewEmail] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState('');
|
||||||
|
|
||||||
|
const fetchAllowedEmails = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/allowed-emails?organizationId=${organizationId}`
|
||||||
|
);
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setAllowedEmails(data.allowedEmails);
|
||||||
|
} else {
|
||||||
|
setError('Erro ao carregar emails permitidos');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar emails permitidos:', error);
|
||||||
|
setError('Erro ao carregar emails permitidos');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (organizationId) {
|
||||||
|
fetchAllowedEmails();
|
||||||
|
}
|
||||||
|
}, [organizationId]);
|
||||||
|
|
||||||
|
const handleAddEmail = async () => {
|
||||||
|
if (!newEmail.trim()) {
|
||||||
|
setError('Email é obrigatório');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/allowed-emails', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: newEmail.trim(),
|
||||||
|
organizationId,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setSuccess('Email adicionado com sucesso');
|
||||||
|
setNewEmail('');
|
||||||
|
fetchAllowedEmails();
|
||||||
|
// Notificar que a lista de emails mudou
|
||||||
|
onEmailListChanged?.();
|
||||||
|
} else {
|
||||||
|
setError(data.error || 'Erro ao adicionar email');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar email:', error);
|
||||||
|
setError('Erro ao adicionar email');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveEmail = async (email: string) => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/allowed-emails', {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email,
|
||||||
|
organizationId,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setSuccess('Email removido com sucesso');
|
||||||
|
fetchAllowedEmails();
|
||||||
|
// Notificar que a lista de emails mudou
|
||||||
|
onEmailListChanged?.();
|
||||||
|
} else {
|
||||||
|
setError(data.error || 'Erro ao remover email');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao remover email:', error);
|
||||||
|
setError('Erro ao remover email');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="w-full">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Mail className="h-5 w-5" />
|
||||||
|
Emails Externos Permitidos - {organizationName}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Gerencie emails externos que podem se registrar nesta organização.
|
||||||
|
Emails do domínio jurunense.com.br são permitidos automaticamente.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Adicionar novo email */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="new-email">Adicionar Email Externo</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id="new-email"
|
||||||
|
type="email"
|
||||||
|
placeholder="exemplo@empresa.com"
|
||||||
|
value={newEmail}
|
||||||
|
onChange={(e) => setNewEmail(e.target.value)}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleAddEmail}
|
||||||
|
disabled={isLoading || !newEmail.trim()}
|
||||||
|
className="px-4"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Adicionar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mensagens de feedback */}
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-md text-red-700">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{success && (
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-md text-green-700">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
{success}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Lista de emails permitidos */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold">Emails Externos Permitidos</h3>
|
||||||
|
|
||||||
|
{allowedEmails.length === 0 ? (
|
||||||
|
<p className="text-muted-foreground text-center py-8">
|
||||||
|
Nenhum email externo foi adicionado para esta organização ainda.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{allowedEmails.map((email) => (
|
||||||
|
<div
|
||||||
|
key={email.id}
|
||||||
|
className="flex items-center justify-between p-3 border rounded-md"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Mail className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span className="font-medium">{email.email}</span>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Adicionado em{' '}
|
||||||
|
{new Date(email.createdAt).toLocaleDateString('pt-BR')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-red-600 hover:text-red-700"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Remover Email</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
Tem certeza que deseja remover o email{' '}
|
||||||
|
<strong>{email.email}</strong> da lista de permitidos
|
||||||
|
desta organização? Este usuário não poderá mais se
|
||||||
|
registrar nesta organização.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={() => handleRemoveEmail(email.email)}
|
||||||
|
className="bg-red-600 hover:bg-red-700"
|
||||||
|
>
|
||||||
|
Remover
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Informações adicionais */}
|
||||||
|
<div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
|
||||||
|
<h4 className="font-semibold text-blue-900 mb-2">
|
||||||
|
Informações Importantes:
|
||||||
|
</h4>
|
||||||
|
<ul className="text-sm text-blue-800 space-y-1">
|
||||||
|
<li>
|
||||||
|
• Emails do domínio <strong>jurunense.com.br</strong> são
|
||||||
|
permitidos automaticamente
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
• Apenas membros da organização podem gerenciar emails externos
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
• Emails removidos não poderão mais se registrar nesta organização
|
||||||
|
</li>
|
||||||
|
<li>• Usuários já registrados não são afetados pela remoção</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Organization, OrganizationMember } from '@/types/User';
|
||||||
|
import { PlusIcon, UsersIcon } from 'lucide-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface OrganizationManagerProps {
|
||||||
|
onOrganizationSelect?: (organization: Organization) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OrganizationManager({
|
||||||
|
onOrganizationSelect,
|
||||||
|
}: OrganizationManagerProps) {
|
||||||
|
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||||
|
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
|
||||||
|
const [members, setMembers] = useState<OrganizationMember[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
// Estados para criar organização
|
||||||
|
const [showCreateDialog, setShowCreateDialog] = useState(false);
|
||||||
|
const [newOrgName, setNewOrgName] = useState('');
|
||||||
|
const [newOrgSlug, setNewOrgSlug] = useState('');
|
||||||
|
const [newOrgDescription, setNewOrgDescription] = useState('');
|
||||||
|
|
||||||
|
// Estados para adicionar membro
|
||||||
|
const [showAddMemberDialog, setShowAddMemberDialog] = useState(false);
|
||||||
|
const [newMemberEmail, setNewMemberEmail] = useState('');
|
||||||
|
const [newMemberRole, setNewMemberRole] = useState<'member' | 'admin'>(
|
||||||
|
'member'
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchOrganizations();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedOrg) {
|
||||||
|
fetchMembers(selectedOrg.id);
|
||||||
|
}
|
||||||
|
}, [selectedOrg]);
|
||||||
|
|
||||||
|
const fetchOrganizations = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await fetch('/api/organizations');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
setOrganizations(result.data || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar organizações:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchMembers = async (organizationId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/organizations/${organizationId}/members`
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
setMembers(result.data || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar membros:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateOrganization = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/organizations', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: newOrgName,
|
||||||
|
slug: newOrgSlug,
|
||||||
|
description: newOrgDescription,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
setOrganizations([...organizations, result.data]);
|
||||||
|
setShowCreateDialog(false);
|
||||||
|
setNewOrgName('');
|
||||||
|
setNewOrgSlug('');
|
||||||
|
setNewOrgDescription('');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao criar organização:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddMember = async () => {
|
||||||
|
if (!selectedOrg) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/organizations/${selectedOrg.id}/members`,
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: newMemberEmail,
|
||||||
|
role: newMemberRole,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchMembers(selectedOrg.id);
|
||||||
|
setShowAddMemberDialog(false);
|
||||||
|
setNewMemberEmail('');
|
||||||
|
setNewMemberRole('member');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao adicionar membro:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<h2 className="text-xl font-semibold">Organizações</h2>
|
||||||
|
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<PlusIcon className="w-4 h-4 mr-2" />
|
||||||
|
Nova Organização
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Criar Nova Organização</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>Nome da Organização</Label>
|
||||||
|
<Input
|
||||||
|
value={newOrgName}
|
||||||
|
onChange={(e) => setNewOrgName(e.target.value)}
|
||||||
|
placeholder="Nome da organização"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Slug</Label>
|
||||||
|
<Input
|
||||||
|
value={newOrgSlug}
|
||||||
|
onChange={(e) => setNewOrgSlug(e.target.value)}
|
||||||
|
placeholder="slug-da-organizacao"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Descrição</Label>
|
||||||
|
<Textarea
|
||||||
|
value={newOrgDescription}
|
||||||
|
onChange={(e) => setNewOrgDescription(e.target.value)}
|
||||||
|
placeholder="Descrição da organização"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline">Cancelar</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button onClick={handleCreateOrganization}>Criar</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{organizations.map((org) => (
|
||||||
|
<div
|
||||||
|
key={org.id}
|
||||||
|
className={`p-4 border rounded-lg cursor-pointer transition-colors ${
|
||||||
|
selectedOrg?.id === org.id
|
||||||
|
? 'border-primary bg-primary/5'
|
||||||
|
: 'border-border hover:border-primary/50'
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedOrg(org);
|
||||||
|
onOrganizationSelect?.(org);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3 className="font-semibold">{org.name}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{org.description}</p>
|
||||||
|
<p className="text-xs text-muted-foreground mt-2">
|
||||||
|
Slug: {org.slug}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedOrg && (
|
||||||
|
<div className="mt-6">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h3 className="text-lg font-semibold">
|
||||||
|
Membros de {selectedOrg.name}
|
||||||
|
</h3>
|
||||||
|
<Dialog
|
||||||
|
open={showAddMemberDialog}
|
||||||
|
onOpenChange={setShowAddMemberDialog}
|
||||||
|
>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button size="sm">
|
||||||
|
<UsersIcon className="w-4 h-4 mr-2" />
|
||||||
|
Adicionar Membro
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Adicionar Membro</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>Email do Usuário</Label>
|
||||||
|
<Input
|
||||||
|
value={newMemberEmail}
|
||||||
|
onChange={(e) => setNewMemberEmail(e.target.value)}
|
||||||
|
placeholder="usuario@exemplo.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Função</Label>
|
||||||
|
<Select
|
||||||
|
value={newMemberRole}
|
||||||
|
onValueChange={(value: 'member' | 'admin') =>
|
||||||
|
setNewMemberRole(value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="member">Membro</SelectItem>
|
||||||
|
<SelectItem value="admin">Administrador</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline">Cancelar</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button onClick={handleAddMember}>Adicionar</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{members.map((member) => (
|
||||||
|
<div
|
||||||
|
key={member.id}
|
||||||
|
className="flex justify-between items-center p-3 border rounded-lg"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">{member.user?.name}</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{member.user?.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs px-2 py-1 bg-secondary rounded-full">
|
||||||
|
{member.role}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
|
||||||
|
import { EditProjectDialog } from '@/app/(controle)/dashboard/components/EditProjectDialog';
|
||||||
|
import { ProjectMembersDialog } from '@/app/(controle)/dashboard/components/ProjectMembersDialog';
|
||||||
|
import { Project } from '@/types/Project';
|
||||||
|
import { Organization, User } from '@/types/User';
|
||||||
|
import {
|
||||||
|
CalendarIcon,
|
||||||
|
CheckCircle,
|
||||||
|
Circle,
|
||||||
|
Clock,
|
||||||
|
GitBranch,
|
||||||
|
User as UserIcon,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
interface ProjectListProps {
|
||||||
|
projects: Project[] | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
searchTerm: string;
|
||||||
|
statusFilter: string;
|
||||||
|
selectedOrganization: Organization | null;
|
||||||
|
uniqueUsers: User[];
|
||||||
|
onProjectUpdated: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectList({
|
||||||
|
projects,
|
||||||
|
isLoading,
|
||||||
|
searchTerm,
|
||||||
|
statusFilter,
|
||||||
|
selectedOrganization,
|
||||||
|
uniqueUsers,
|
||||||
|
onProjectUpdated,
|
||||||
|
}: ProjectListProps) {
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{[...Array(6)].map((_, index) => (
|
||||||
|
<Card key={index} className="animate-pulse">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="h-4 bg-muted rounded w-3/4"></div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="h-3 bg-muted rounded w-full mb-2"></div>
|
||||||
|
<div className="h-3 bg-muted rounded w-2/3"></div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!projects || projects.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<p className="text-muted-foreground">Nenhum projeto encontrado.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtrar projetos da organização selecionada
|
||||||
|
const organizationProjects = projects.filter(
|
||||||
|
(project) =>
|
||||||
|
!selectedOrganization ||
|
||||||
|
project.organizationId === selectedOrganization.id
|
||||||
|
);
|
||||||
|
|
||||||
|
if (organizationProjects.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Nenhum projeto encontrado na organização selecionada.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtrar projetos baseado no termo de busca e status (já filtrados por organização)
|
||||||
|
const filteredProjects = organizationProjects.filter((project) => {
|
||||||
|
const matchesSearch =
|
||||||
|
project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
project.description.toLowerCase().includes(searchTerm.toLowerCase());
|
||||||
|
const matchesStatus =
|
||||||
|
statusFilter === 'all' || project.status === statusFilter;
|
||||||
|
|
||||||
|
return matchesSearch && matchesStatus;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (filteredProjects.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Nenhum projeto encontrado com os filtros aplicados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusIcon = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'active':
|
||||||
|
return <Circle className="w-4 h-4 text-green-500" />;
|
||||||
|
case 'inactive':
|
||||||
|
return <CheckCircle className="w-4 h-4 text-gray-500" />;
|
||||||
|
default:
|
||||||
|
return <Circle className="w-4 h-4 text-gray-500" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'active':
|
||||||
|
return 'Ativo';
|
||||||
|
case 'inactive':
|
||||||
|
return 'Inativo';
|
||||||
|
default:
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{filteredProjects.map((project) => (
|
||||||
|
<div key={project.id} className="relative group">
|
||||||
|
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
|
||||||
|
<Link href={`/project/${project.id}`} className="block">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<CardTitle className="text-lg font-semibold overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{project.name}
|
||||||
|
</CardTitle>
|
||||||
|
{getStatusIcon(project.status)}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<p className="text-sm text-muted-foreground overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{project.projectUrl && (
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<GitBranch className="w-3 h-3 flex-shrink-0" />
|
||||||
|
<span className="truncate">
|
||||||
|
{project.projectUrl.replace(
|
||||||
|
/https:\/\/github\.com\//g,
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<CalendarIcon className="w-3 h-3 flex-shrink-0" />
|
||||||
|
<span className="truncate">
|
||||||
|
{new Date(project.initialDate).toLocaleDateString()} -{' '}
|
||||||
|
{project.finalDate
|
||||||
|
? new Date(project.finalDate).toLocaleDateString()
|
||||||
|
: 'Não definido'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<UserIcon className="w-3 h-3 flex-shrink-0" />
|
||||||
|
<span className="truncate">
|
||||||
|
{project.users?.[0]?.name || 'Nenhum usuário'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<Clock className="w-3 h-3 flex-shrink-0" />
|
||||||
|
<span>
|
||||||
|
{project.cards.length} cards •{' '}
|
||||||
|
{
|
||||||
|
project.cards.filter(
|
||||||
|
(card) => card.status === 'Concluido'
|
||||||
|
).length
|
||||||
|
}{' '}
|
||||||
|
concluídos
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 pt-2">
|
||||||
|
<span className="text-xs px-2 py-1 rounded-full bg-muted">
|
||||||
|
{getStatusText(project.status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Botões de ação */}
|
||||||
|
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-10">
|
||||||
|
<ProjectMembersDialog
|
||||||
|
project={project}
|
||||||
|
availableUsers={uniqueUsers}
|
||||||
|
onMembersChanged={onProjectUpdated}
|
||||||
|
/>
|
||||||
|
<EditProjectDialog
|
||||||
|
project={project}
|
||||||
|
selectedOrganization={selectedOrganization}
|
||||||
|
uniqueUsers={uniqueUsers}
|
||||||
|
onProjectUpdated={onProjectUpdated}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from './ui/select';
|
||||||
|
|
||||||
|
interface SeletorProps {
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
options: { value: string; label: string }[];
|
||||||
|
placheHolder: string;
|
||||||
|
}
|
||||||
|
export default function Seletor({
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
options,
|
||||||
|
placheHolder,
|
||||||
|
}: SeletorProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Select value={value} onValueChange={onValueChange}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={placheHolder} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{options.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useTimer } from '@/context/timerContext';
|
||||||
|
import { Clock, Pause, Play, Square } from 'lucide-react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
export default function TimerDisplay() {
|
||||||
|
const {
|
||||||
|
activeCard,
|
||||||
|
elapsedTime,
|
||||||
|
isPaused,
|
||||||
|
pauseTimer,
|
||||||
|
resumeTimer,
|
||||||
|
stopTimer,
|
||||||
|
formatTime,
|
||||||
|
} = useTimer();
|
||||||
|
|
||||||
|
if (!activeCard) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleStop = async () => {
|
||||||
|
const finalTime = elapsedTime;
|
||||||
|
await stopTimer();
|
||||||
|
toast.success(`Atividade finalizada: ${activeCard.name}`, {
|
||||||
|
description: `Tempo gasto: ${formatTime(finalTime)}`,
|
||||||
|
duration: 5000,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3 bg-accent/20 px-4 py-2 rounded-lg border">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock className="w-4 h-4 text-primary" />
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
|
{activeCard.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-mono text-lg font-bold text-primary">
|
||||||
|
{formatTime(elapsedTime)}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{isPaused ? (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={resumeTimer}
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
>
|
||||||
|
<Play className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={pauseTimer}
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
>
|
||||||
|
<Pause className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleStop}
|
||||||
|
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
|
||||||
|
>
|
||||||
|
<Square className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Moon, Sun } from 'lucide-react';
|
||||||
|
import { useTheme } from 'next-themes';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
|
||||||
|
export function ButtonToogleTheme() {
|
||||||
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon" className="cursor-pointer">
|
||||||
|
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
|
||||||
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
|
||||||
|
<span className="sr-only">Toggle theme</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => setTheme('light')}
|
||||||
|
className="cursor-pointer"
|
||||||
|
>
|
||||||
|
Light
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => setTheme('dark')}
|
||||||
|
className="cursor-pointer"
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => setTheme('system')}
|
||||||
|
className="cursor-pointer"
|
||||||
|
>
|
||||||
|
System
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue