From cb4fd35dc213a1490d040309bdccb29a6f286bc9 Mon Sep 17 00:00:00 2001 From: Tiago Yamamoto Date: Fri, 26 Dec 2025 12:47:53 -0300 Subject: [PATCH] docs: Comprehensive FRONTEND.md update with all pages, components, and features --- DEVOPS.md | 257 ------------------------------- ROADMAP.md | 44 ------ frontend/FRONTEND.md | 351 ++++++++++++++++++++++++++++++++++--------- 3 files changed, 284 insertions(+), 368 deletions(-) delete mode 100644 DEVOPS.md delete mode 100644 ROADMAP.md diff --git a/DEVOPS.md b/DEVOPS.md deleted file mode 100644 index cffd9e5..0000000 --- a/DEVOPS.md +++ /dev/null @@ -1,257 +0,0 @@ -# DevOps - GoHorseJobs - -Documentação de infraestrutura, CI/CD e deploy do projeto GoHorseJobs. - ---- - -## 📁 Estrutura - -``` -. -├── .drone.yml # Pipeline CI/CD (Drone) -├── k8s/ -│ ├── dev/ # Manifests Kubernetes - Desenvolvimento -│ │ ├── backend-deployment.yaml -│ │ └── backend-service.yaml -│ ├── hml/ # Manifests Kubernetes - Homologação -│ │ ├── backend-deployment.yaml -│ │ └── backend-service.yaml -│ └── prd/ # Manifests Kubernetes - Produção -│ ├── backend-deployment.yaml -│ └── backend-service.yaml -├── backend/ -│ ├── Dockerfile # Build da API Go -│ └── .env.example # Variáveis de ambiente -├── frontend/ # Next.js App -└── seeder-api/ # Seeder Node.js para popular DB -``` - ---- - -## 🌍 Ambientes - -| Ambiente | Branch | Namespace K8s | Registry Harbor | Réplicas | -|----------|--------|---------------|-----------------|----------| -| **DEV** | `dev` | `gohorsejobsdev` | `gohorsejobsdev/gohorsejobs-backend` | 1 | -| **HML** | `hml` | `gohorsejobshml` | `gohorsejobshml/gohorsejobs-backend` | 2 | -| **PRD** | `main` | `gohorsejobs` | `gohorsejobs/gohorsejobs-backend` | 3 | - ---- - -## 🔄 Pipeline CI/CD (Drone) - -### Fluxo de Deploy - -``` -dev branch → build → push (Harbor) → deploy (K8s gohorsejobsdev) - ↓ -hml branch → build → push (Harbor) → deploy (K8s gohorsejobshml) - ↓ -main branch → build → push (Harbor) → deploy (K8s gohorsejobs) -``` - -### Triggers - -- Push na branch `dev` → executa pipeline `deploy-backend-dev` -- Push na branch `hml` → executa pipeline `deploy-backend-hml` -- Push na branch `main` → executa pipeline `deploy-backend-prd` - -### Etapas do Pipeline - -1. **build-and-push-backend** - Builda imagem Docker e envia para Harbor -2. **export-envs-to-k8s** - Cria secret `backend-secrets` no namespace -3. **deploy-backend** - Aplica manifests K8s e reinicia deployment - ---- - -## 🔐 Secrets (Drone CI) - -Secrets que precisam estar configurados no Drone: - -### Registry -| Secret | Descrição | -|--------|-----------| -| `HARBOR_USERNAME` | Usuário do Harbor | -| `HARBOR_PASSWORD` | Senha do Harbor | - -### Database -| Secret | Ambiente | Descrição | -|--------|----------|-----------| -| `DB_HOST` | Todos | Host do PostgreSQL | -| `DB_PORT` | Todos | Porta do PostgreSQL | -| `DB_USER` | Todos | Usuário do PostgreSQL | -| `DB_PASSWORD` | Todos | Senha do PostgreSQL | -| `DB_SSLMODE` | Todos | `require` ou `disable` | -| `DB_NAME_DEV` | DEV | Nome do banco dev | -| `DB_NAME_HML` | HML | Nome do banco hml | -| `DB_NAME` | PRD | Nome do banco produção | - -### S3/Object Storage -| Secret | Descrição | -|--------|-----------| -| `AWS_ACCESS_KEY_ID` | Access Key | -| `AWS_SECRET_ACCESS_KEY` | Secret Key | -| `AWS_ENDPOINT` | Endpoint S3-compatible | -| `AWS_REGION` | Região | -| `S3_BUCKET` | Nome do bucket | - -### Aplicação -| Secret | Descrição | -|--------|-----------| -| `JWT_SECRET` | Secret para tokens JWT (min. 32 chars) | -| `PORT` | Porta da API (8521) | -| `CORS_ORIGINS_DEV` | URLs permitidas CORS (dev) | -| `CORS_ORIGINS_HML` | URLs permitidas CORS (hml) | -| `CORS_ORIGINS` | URLs permitidas CORS (prd) | - ---- - -## ☸️ Kubernetes - -### Namespaces - -```bash -# Criar namespaces -kubectl create namespace gohorsejobsdev -kubectl create namespace gohorsejobshml -kubectl create namespace gohorsejobs -``` - -### Registry Secret - -Criar secret para pull de imagens do Harbor em cada namespace: - -```bash -kubectl create secret docker-registry harbor-registry \ - --docker-server=in.gohorsejobs.com \ - --docker-username= \ - --docker-password= \ - -n gohorsejobsdev - -# Repetir para gohorsejobshml e gohorsejobs -``` - -### Deploy Manual - -```bash -# DEV -kubectl apply -f k8s/dev/backend-deployment.yaml -kubectl apply -f k8s/dev/backend-service.yaml - -# HML -kubectl apply -f k8s/hml/backend-deployment.yaml -kubectl apply -f k8s/hml/backend-service.yaml - -# PRD -kubectl apply -f k8s/prd/backend-deployment.yaml -kubectl apply -f k8s/prd/backend-service.yaml -``` - -### Comandos Úteis - -```bash -# Ver pods -kubectl get pods -n gohorsejobsdev - -# Ver logs -kubectl logs -f deployment/gohorse-backend -n gohorsejobsdev - -# Restart deployment -kubectl rollout restart deployment/gohorse-backend -n gohorsejobsdev - -# Ver secrets -kubectl get secrets -n gohorsejobsdev - -# Descrever deployment -kubectl describe deployment gohorse-backend -n gohorsejobsdev -``` - ---- - -## 🐳 Docker - -### Build Local - -```bash -cd backend -docker build -t gohorsejobs-backend:local . -``` - -### Variáveis de Ambiente - -Ver `.env.example` para lista completa. Principais: - -| Variável | Descrição | Exemplo | -|----------|-----------|---------| -| `PORT` | Porta da API | `8521` | -| `DB_HOST` | Host PostgreSQL | `db.example.com` | -| `DB_NAME` | Nome do banco | `gohorsejobs_dev` | -| `DB_SSLMODE` | Modo SSL | `require` | -| `JWT_SECRET` | Secret JWT | `sua-chave-secreta-32-chars` | - ---- - -## 🗄️ Banco de Dados - -### Conexão - -``` -Host: db-60059.dc-sp-1.absamcloud.com -Port: 26868 -SSL: require -``` - -### Bancos por Ambiente - -| Ambiente | Database | -|----------|----------| -| DEV | `gohorsejobs_dev` | -| HML | `gohorsejobs_hml` | -| PRD | `gohorsejobs` | - -### Seeder - -```bash -cd seeder-api -npm install -npm run seed # Popular banco -npm run seed:reset # Limpar banco -``` - ---- - -## 🧑‍💻 Usuários de Teste - -### SuperAdmin -- **Login:** `superadmin` -- **Senha:** `Admin@2025!` - -### Company Admins -| Login | Senha | Empresa | -|-------|-------|---------| -| `takeshi_yamamoto` | `Takeshi@2025` | TechCorp | -| `kenji@appmakers.mobile` | `Takeshi@2025` | AppMakers | - -### Recrutadores -| Login | Senha | Empresa | -|-------|-------|---------| -| `maria_santos` | `User@2025` | DesignHub | - -### Candidatos -| Login | Senha | -|-------|-------| -| `paulo_santos` | `User@2025` | -| `maria@email.com` | `User@2025` | - ---- - -## 📋 Checklist Deploy Novo Ambiente - -- [ ] Criar namespace no K8s -- [ ] Criar secret `harbor-registry` no namespace -- [ ] Adicionar secrets no Drone CI -- [ ] Criar banco de dados -- [ ] Executar seeder (opcional) -- [ ] Fazer push na branch correspondente -- [ ] Verificar logs do pipeline -- [ ] Testar endpoint `/health` diff --git a/ROADMAP.md b/ROADMAP.md deleted file mode 100644 index 9a45616..0000000 --- a/ROADMAP.md +++ /dev/null @@ -1,44 +0,0 @@ -# 🗺️ Roadmap GoHorse Jobs - -Este documento descreve o plano de desenvolvimento futuro para a plataforma GoHorse Jobs. - -## 🚀 Q1 2026 - Fundação e Core Features (Atual) -- [x] **Backend**: Clean Architecture, Autenticação JWT, CRUD Básico. -- [x] **Frontend**: Next.js 15, UI Components, Listagem de Vagas. -- [x] **Database**: Modelagem inicial (Users, Companies, Jobs, Applications). -- [x] **Performance**: Implementação de Paginação Server-side e Filtros. -- [x] **UX**: Skeleton Screens, i18n, FAQ Page. - -## 🏗️ Q2 2026 - Área Administrativa e Candidatura -- [ ] **Admin Dashboard**: - - Métricas de uso (novos usuários, vagas ativas). - - Moderação de vagas e empresas. - - Gestão de Tags e Categorias. -- [ ] **Fluxo de Candidatura Real**: - - Upload de currículo (integração S3/MinIO). - - Histórico de candidaturas no painel do candidato. - - Notificações de status por email. -- [ ] **Perfil da Empresa Completo**: - - Edição de perfil (Logo, Descrição, Cultura). - - Gestão de recrutadores (convidar membros). - -## 🛠️ Q3 2026 - Melhorias e Monetização -- [ ] **Monetização**: - - Vagas em destaque (Featured Jobs com pagamento). - - Planos de assinatura para empresas. -- [ ] **Busca Avançada**: - - Integração com ElasticSearch ou Algolia para busca full-text performática. - - Filtros por distância (Geo-search). -- [ ] **Social**: - - Login Social (Google, LinkedIn, GitHub). - - Compartilhamento de vagas com preview (OG Tags dinâmicas). - -## 🔮 Futuro (Backlog) -- [ ] **App Mobile** (React Native). -- [ ] **IA para Recrutamento**: - - Matching automático de skills. - - Geração de descrição de vagas com LLMs. -- [ ] **Testes E2E** (Playwright/Cypress). - ---- -> *Este roadmap é uma estimativa e pode sofrer alterações conforme o feedback dos usuários e prioridades do negócio.* diff --git a/frontend/FRONTEND.md b/frontend/FRONTEND.md index 292a508..5eab74d 100644 --- a/frontend/FRONTEND.md +++ b/frontend/FRONTEND.md @@ -6,12 +6,22 @@ Frontend da plataforma GoHorse Jobs construído com **Next.js 15** e **App Router**. -### ✨ Features Recentes -- **Server-Side Pagination**: Listagem de vagas otimizada com paginação real. -- **Busca e Filtros**: Filtragem por localização, tipo e modo de trabalho integrada ao backend. -- **Internacionalização (i18n)**: Suporte a múltiplos idiomas (PT, EN, ES). -- **Skeleton Loading**: UI polida com estados de carregamento. -- **FAQ & Contato**: Páginas de suporte com tickets simulados. +> **Last Updated:** 2024-12-26 + +--- + +## ✨ Features + +- **Server-Side Pagination**: Listagem de vagas otimizada +- **Busca e Filtros**: Tipo, localização, modo de trabalho +- **Internacionalização (i18n)**: PT, EN +- **Dark/Light Mode**: Tema automático +- **Skeleton Loading**: Estados de carregamento +- **Real-time Chat**: Integração Appwrite +- **Push Notifications**: Firebase Cloud Messaging +- **Avatar Upload**: Pre-signed URLs (S3/R2) +- **Email Templates Admin**: CRUD para templates +- **Public Job Posting**: Wizard de registro + vaga --- @@ -19,90 +29,267 @@ Frontend da plataforma GoHorse Jobs construído com **Next.js 15** e **App Route ``` src/ -├── app/ # App Router (Páginas) -│ ├── dashboard/ # Área logada -│ │ ├── admin/ # Painel SuperAdmin -│ │ ├── empresa/ # Painel Empresa -│ │ └── candidato/ # Painel Candidato -│ ├── login/ # Autenticação -│ ├── vagas/ # Listagem pública -│ └── layout.tsx # Layout raiz +├── app/ # App Router (35 pages) +│ ├── page.tsx # Landing page +│ ├── login/ # Autenticação +│ ├── register/ # Registro (candidate, company) +│ ├── post-job/ # **NEW** Wizard público +│ ├── jobs/ # Listagem e detalhes +│ │ ├── page.tsx # Listagem +│ │ ├── [id]/page.tsx # Detalhes +│ │ └── [id]/apply/ # Candidatura +│ ├── dashboard/ # Área logada (12 subpastas) +│ │ ├── admin/ # Painel Admin +│ │ │ └── email-templates/ # **NEW** CRUD templates +│ │ ├── applications/ # Candidaturas +│ │ ├── candidates/ # Lista candidatos +│ │ ├── companies/ # Lista empresas +│ │ ├── jobs/ # Gestão de vagas +│ │ ├── messages/ # Chat real-time +│ │ ├── profile/ # Perfil do usuário +│ │ ├── settings/ # Configurações +│ │ ├── support/ # Tickets +│ │ └── users/ # Gestão de usuários +│ ├── about/ # Sobre +│ ├── contact/ # Contato +│ ├── faq/ # FAQ +│ └── terms/, privacy/ # Legais │ -├── components/ # Componentes React -│ ├── ui/ # shadcn/ui primitives -│ ├── forms/ # Formulários reutilizáveis -│ └── (feature)/ # Componentes por feature +├── components/ # 44 componentes +│ ├── ui/ # 24 shadcn/ui primitives +│ ├── navbar.tsx # Navegação principal +│ ├── footer.tsx # Rodapé +│ ├── sidebar.tsx # Sidebar dashboard +│ ├── job-card.tsx # Card de vaga +│ ├── notification-dropdown.tsx # Notificações +│ ├── profile-picture-upload.tsx # Upload de avatar +│ └── loading-skeletons.tsx # Skeletons │ -├── contexts/ # React Contexts -│ └── AuthContext.tsx # Autenticação global +├── contexts/ # React Contexts +│ ├── AuthContext.tsx # Autenticação global +│ └── ThemeContext.tsx # **NEW** Tema configurável │ -├── hooks/ # Custom Hooks -│ ├── useAuth.ts # Hook de autenticação -│ └── useProfile.ts # Hook de perfil +├── hooks/ # Custom Hooks +│ ├── useAuth.ts # Autenticação +│ ├── useProfile.ts # Perfil +│ └── ... │ -└── lib/ # Utilitários - ├── api.ts # Cliente HTTP - └── utils.ts # Helpers gerais +├── lib/ # Utilitários (13 arquivos) +│ ├── api.ts # Cliente HTTP (22KB) +│ ├── auth.ts # Auth helpers +│ ├── appwrite.ts # Appwrite client +│ ├── firebase-client.ts # FCM client +│ ├── storage.ts # Pre-signed URLs +│ ├── i18n.tsx # Internacionalização +│ ├── types.ts # TypeScript types +│ └── mock-data.ts # Dados mock (fallback) +│ +└── i18n/ # Traduções + ├── pt.json # Português + └── en.json # English ``` --- +## 📱 Páginas + +### Públicas + +| Rota | Descrição | +|------|-----------| +| `/` | Landing page | +| `/jobs` | Listagem de vagas | +| `/jobs/{id}` | Detalhes da vaga | +| `/jobs/{id}/apply` | Candidatura | +| `/login` | Login | +| `/register/candidate` | Registro candidato | +| `/register/company` | Registro empresa | +| `/post-job` | **NEW** Wizard público (registro + vaga) | +| `/about` | Sobre | +| `/contact` | Contato | +| `/faq` | FAQ | +| `/forgot-password` | Reset senha | + +### Dashboard (Autenticadas) + +| Rota | Roles | Descrição | +|------|-------|-----------| +| `/dashboard` | All | Dashboard home | +| `/dashboard/profile` | All | Perfil do usuário | +| `/dashboard/settings` | Admin | Configurações (tema, logo) | +| `/dashboard/jobs` | Admin, Recruiter | Gestão de vagas | +| `/dashboard/jobs/new` | Admin, Recruiter | Criar vaga | +| `/dashboard/applications` | Admin, Recruiter | Candidaturas | +| `/dashboard/candidates` | Admin | Lista candidatos | +| `/dashboard/companies` | SuperAdmin | Lista empresas | +| `/dashboard/users` | SuperAdmin, Admin | Gestão usuários | +| `/dashboard/messages` | All | Chat real-time | +| `/dashboard/support` | All | Tickets de suporte | +| `/dashboard/admin/email-templates` | SuperAdmin | **NEW** Templates email | + +--- + ## 🎨 Design System ### Tecnologias -| Tecnologia | Uso | -|------------|-----| -| **shadcn/ui** | Componentes base (Radix UI) | -| **Tailwind CSS 4** | Estilização utility-first | -| **Lucide Icons** | Ícones | -| **Framer Motion** | Animações | +| Tecnologia | Versão | Uso | +|------------|--------|-----| +| **shadcn/ui** | - | Componentes base (Radix UI) | +| **Tailwind CSS** | 4 | Estilização utility-first | +| **Lucide Icons** | 0.454 | Ícones | +| **Framer Motion** | 12 | Animações | +| **Sonner** | 1.7 | Toasts/Notificações | +| **Recharts** | 2.15 | Gráficos | ### Tema -O tema está definido em `src/app/globals.css` usando CSS variables com cores `oklch()`: +Definido em `src/app/globals.css`: -- **Primary**: Laranja (`oklch(0.68 0.22 45)`) -- **Background**: Light/Dark mode automático -- **Componentes**: Herdam do design system +```css +:root { + --primary: oklch(0.68 0.22 45); /* Laranja */ + --background: oklch(1 0 0); /* Branco */ + --foreground: oklch(0.145 0 0); /* Preto */ +} + +.dark { + --background: oklch(0.145 0 0); /* Preto */ + --foreground: oklch(0.985 0 0); /* Branco */ +} +``` --- -## 📱 Páginas Principais +## 🔌 API Client -| Rota | Descrição | Acesso | -|------|-----------|--------| -| `/` | Landing page | Público | -| `/jobs` | Listagem de vagas | Público | -| `/login` | Autenticação | Público | -| `/dashboard/admin` | Painel admin | SuperAdmin | -| `/dashboard/empresa` | Painel empresa | CompanyAdmin, Recruiter | -| `/dashboard/candidato` | Painel candidato | JobSeeker | +O cliente de API está em `lib/api.ts` (22KB): + +### Módulos + +| Módulo | Funções | +|--------|---------| +| **jobsApi** | list, getById, create, update, delete | +| **adminApi** | companies, users, candidates, tags | +| **profileApi** | getMe, updateProfile, uploadAvatar | +| **applicationsApi** | create, list, getById, updateStatus | +| **emailTemplatesApi** | **NEW** list, get, create, update, delete | +| **emailSettingsApi** | **NEW** get, update | +| **chatApi** | listConversations, listMessages, sendMessage | +| **supportApi** | tickets, messages | +| **settingsApi** | get, save | +| **fcmApi** | saveToken | + +### Exemplo + +```typescript +import { jobsApi, profileApi } from "@/lib/api"; + +// Listar vagas +const jobs = await jobsApi.list({ page: 1, limit: 10 }); + +// Atualizar perfil +await profileApi.updateProfile({ name: "New Name" }); + +// Upload avatar (pre-signed URL flow) +await profileApi.uploadAvatar(file); +``` + +--- + +## 🔒 Autenticação + +### Fluxo + +1. **Login**: POST `/api/v1/auth/login` +2. **Token Storage**: `localStorage.auth_token` +3. **Cookie**: JWT HttpOnly (backup) +4. **Headers**: `Authorization: Bearer ` + +### Auth Context + +```typescript +import { useAuth } from "@/hooks/useAuth"; + +const { user, isLoading, login, logout } = useAuth(); +``` + +--- + +## 🌍 Internacionalização + +### Idiomas Suportados + +- 🇧🇷 Português (pt) +- 🇺🇸 English (en) + +### Uso + +```typescript +import { useTranslation } from "@/lib/i18n"; + +const { t, locale, setLocale } = useTranslation(); + +// Usar tradução +

{t("home.hero.title")}

+ +// Trocar idioma + +``` + +--- + +## 🔧 Environment Variables + +```env +# API +NEXT_PUBLIC_API_URL=https://api.gohorsejobs.com + +# Backoffice +NEXT_PUBLIC_BACKOFFICE_URL=https://backoffice.gohorsejobs.com + +# Appwrite (Chat) +NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1 +NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id +NEXT_PUBLIC_APPWRITE_DATABASE_ID=your-database-id + +# Firebase (Push Notifications) +NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key +NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id +``` --- ## 🚀 Desenvolvimento -### Instalar dependências +### Instalar ```bash npm install +# ou +pnpm install ``` -### Executar em desenvolvimento +### Executar ```bash npm run dev ``` -### Build de produção +### Build ```bash npm run build npm run start ``` -### Linting +### Testes + +```bash +npm run test +``` + +### Lint ```bash npm run lint @@ -120,33 +307,63 @@ docker build -t gohorse-frontend . docker run -p 3000:3000 gohorse-frontend ``` -**Nota**: Requer `output: "standalone"` no `next.config.ts` (já configurado). +**Nota**: Usa `output: "standalone"` no `next.config.ts`. --- -## 📁 Componentes Principais +## 📦 Dependências Principais -| Componente | Descrição | -|------------|-----------| -| `components/ui/*` | Primitivos shadcn/ui | -| `components/dashboard-*` | Componentes do dashboard | -| `components/job-*` | Componentes de vagas | -| `components/sidebar.tsx` | Navegação lateral | +| Package | Version | Uso | +|---------|---------|-----| +| next | 15.5 | Framework | +| react | 19.1 | UI Library | +| tailwindcss | 4.1 | CSS | +| framer-motion | 12.23 | Animações | +| sonner | 1.7 | Toasts | +| recharts | 2.15 | Gráficos | +| firebase | 12.7 | FCM | +| appwrite | 17.0 | Chat | +| zod | 3.25 | Validação | +| zustand | 4.5 | State | --- -## 🔧 Configuração +## 📁 Componentes UI (shadcn) -### Variáveis de Ambiente +24 componentes do shadcn/ui: -```env -NEXT_PUBLIC_API_URL=http://localhost:8080 -``` +| Componente | Uso | +|------------|-----| +| `accordion` | FAQ | +| `alert-dialog` | Confirmações | +| `avatar` | Fotos de perfil | +| `badge` | Tags | +| `button` | Ações | +| `card` | Containers | +| `checkbox` | Formulários | +| `dialog` | Modais | +| `dropdown-menu` | Menus | +| `input` | Campos | +| `label` | Labels | +| `popover` | Popovers | +| `progress` | Progresso | +| `radio-group` | Seleção única | +| `scroll-area` | Scroll customizado | +| `select` | Dropdowns | +| `separator` | Divisores | +| `skeleton` | Loading | +| `slider` | Range | +| `switch` | Toggles | +| `tabs` | Navegação | +| `textarea` | Texto longo | +| `toast` | Notificações | +| `tooltip` | Hints | -### TypeScript +--- -Configurado com strict mode em `tsconfig.json`. +## 🔗 Referências -### ESLint - -Configurado com `next/core-web-vitals` e `next/typescript`. +- [API Documentation](../docs/API.md) +- [Backend](../backend/BACKEND.md) +- [Backoffice](../backoffice/BACKOFFICE.md) +- [Database Schema](../docs/DATABASE.md)