From 87dd11e6b40aca111eea65b785f007e0d2ed10ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vitor?= Date: Wed, 3 Dec 2025 11:28:12 -0300 Subject: [PATCH] =?UTF-8?q?docs:=20atualiza=C3=A7=C3=A3o=20na=20documenta?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20projeto,=20e=20cria=C3=A7=C3=A3o=20da=20do?= =?UTF-8?q?cumenta=C3=A7=C3=A3oo=20do=20frontend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 510 +++++++++++++++++++++++++++++++++++ frontend/README.md | 655 +++++++++++++++++++++------------------------ 2 files changed, 817 insertions(+), 348 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..86e8e5b --- /dev/null +++ b/README.md @@ -0,0 +1,510 @@ +# 📸 Photum - Sistema de Gestão de Formaturas + +Sistema completo de gestão para eventos fotográficos, especializado em formaturas e eventos acadêmicos. Plataforma moderna e intuitiva para gerenciamento de eventos, fotógrafos, instituições de ensino, clientes e entregas, com foco em excelência e atendimento humanizado. + +--- + +## 🎯 Visão Geral + +O **Photum** é uma aplicação web full-stack desenvolvida com React + TypeScript no frontend e preparada para integração com backend, que centraliza todo o fluxo de trabalho de uma empresa de fotografia especializada em formaturas, desde a solicitação inicial do cliente até a entrega final do álbum. + +### Principais Funcionalidades + +- ✅ **Gestão Multi-perfil**: Suporte para 4 tipos de usuários (Superadmin, Empresa, Fotógrafo, Cliente) +- ✅ **Gestão de Instituições**: Cadastro completo de universidades e faculdades +- ✅ **Controle de Eventos**: CRUD completo de eventos de formatura com status workflow +- ✅ **Dashboard Personalizado**: Interface adaptada por perfil de usuário +- ✅ **Sistema de Aprovações**: Workflow de aprovação de eventos para clientes +- ✅ **Gestão de Equipe**: Atribuição de fotógrafos aos eventos +- ✅ **Mapas Interativos**: Integração com Mapbox para visualização de locais +- ✅ **Galeria de Inspirações**: Showcase de trabalhos anteriores +- ✅ **Integração com IA**: Google GenAI para funcionalidades avançadas + +--- + +## 🚀 Como Executar o Projeto + +### Pré-requisitos + +- **Node.js** (versão 18 ou superior) +- **npm** ou **yarn** + +### Estrutura do Repositório + +``` +photum/ +├── frontend/ # Aplicação React + TypeScript +├── backend/ # Backend (em desenvolvimento) +└── README.md # Este arquivo +``` + +### Instalação e Execução + +#### Frontend + +1. **Clone o repositório**: + ```bash + git clone https://github.com/rede5/photum.git + cd photum/frontend + ``` + +2. **Instale as dependências**: + ```bash + npm install + ``` + +3. **Configure as variáveis de ambiente**: + - Crie um arquivo `.env.local` na pasta `frontend` + - Adicione suas credenciais: + ```env + VITE_MAPBOX_TOKEN=seu_token_mapbox_aqui + GEMINI_API_KEY=sua_chave_gemini_aqui + ``` + +4. **Execute o projeto em modo desenvolvimento**: + ```bash + npm run dev + ``` + +5. **Acesse no navegador**: + ``` + http://localhost:3000 + ``` + +### Build para Produção + +```bash +cd frontend +npm run build +npm run preview +``` + +--- + +## 🗺️ Rotas e Navegação + +O sistema utiliza um **roteamento customizado baseado em estados** (sem React Router). As rotas disponíveis são: + +| Rota | Descrição | Acesso | +|------|-----------|--------| +| `/` (`home`) | Landing page institucional com informações da empresa | Público | +| `/login` | Tela de autenticação | Público | +| `/register` | Cadastro de novos usuários e instituições | Público | +| `/dashboard` | Dashboard principal (Lista de eventos) | Autenticado | +| `/events` | Visualização de eventos | Autenticado | +| `/request-event` | Formulário de criação de evento de formatura | Autenticado | +| `/inspiration` | Galeria de inspirações e trabalhos anteriores | Autenticado | +| `/calendar` | Calendário de eventos de formatura | Autenticado | +| `/team` | Gestão de equipe e fotógrafos | Autenticado | +| `/finance` | Módulo financeiro e controle de pagamentos | Autenticado | +| `/settings` | Configurações do sistema e perfil | Autenticado | +| `/privacy` | Política de privacidade | Público | +| `/terms` | Termos de uso | Público | +| `/lgpd` | Informações sobre conformidade LGPD | Público | + +### Navegação no Sistema + +A navegação acontece através do componente `` que chama a função `onNavigate(pageName)` passando o nome da rota desejada. Rotas protegidas redirecionam automaticamente para `/login` se o usuário não estiver autenticado. + +--- + +## 🔐 Tela de Login e Usuários de Demonstração + +### Como Acessar + +1. Na página inicial, clique em **"Área do Cliente"** +2. Você será redirecionado para a **tela de login** (`/login`) + +### Interface de Login + +A tela de login apresenta: +- **Layout dividido**: + - Lado esquerdo com imagem institucional + - Lado direito com formulário de login +- **Campos**: + - E-mail corporativo ou pessoal + - Senha (desabilitada no modo demo) +- **Botão**: "Entrar no Sistema" + +### Usuários de Demonstração + +Não é necessário senha. Basta clicar em um dos cartões de usuário demo ou digitar o e-mail: + +| Perfil | Nome | E-mail | Descrição | +|--------|------|--------|-----------| +| **Superadmin** | Dev Admin | `admin@photum.com` | Acesso total ao sistema | +| **Empresa** | Carlos CEO | `empresa@photum.com` | Dono da empresa de fotografia | +| **Fotógrafo** | Ana Lente | `foto@photum.com` | Profissional fotógrafo | +| **Cliente** | Juliana Noiva | `cliente@photum.com` | Cliente final (dono do evento) | + +### Fluxo de Login + +``` +1. Usuário clica em "Área do Cliente" na Home + ↓ +2. Sistema redireciona para /login + ↓ +3. Usuário seleciona um perfil demo OU digita e-mail manualmente + ↓ +4. Sistema valida o e-mail com mock de usuários + ↓ +5. Se válido: redireciona para /dashboard + Se inválido: exibe mensagem de erro +``` + +### Exemplo de Código (Login) + +```tsx +// Login simplificado (sem senha) +const handleLogin = async (e: React.FormEvent) => { + e.preventDefault(); + const success = await login(email); // Busca no mock de usuários + if (!success) { + setError('Usuário não encontrado'); + } +}; +``` + +--- + +## 👥 Perfis de Usuário e Permissões + +### 1. Superadmin (`SUPERADMIN`) +- **Acesso**: Total ao sistema +- **Funcionalidades**: + - Visualiza todos os eventos + - Gerencia todos os usuários + - Acesso a configurações avançadas + +### 2. Dono da Empresa (`BUSINESS_OWNER`) +- **Acesso**: Administrativo +- **Funcionalidades**: + - Cria e edita eventos + - Atribui fotógrafos + - Aprova solicitações de clientes + - Gerencia equipe + +### 3. Fotógrafo (`PHOTOGRAPHER`) +- **Acesso**: Operacional +- **Funcionalidades**: + - Visualiza eventos atribuídos + - Atualiza status de eventos + - Faz upload de fotos + - Acessa detalhes de contatos + +### 4. Cliente (`EVENT_OWNER`) +- **Acesso**: Restrito aos próprios eventos +- **Funcionalidades**: + - Solicita novos eventos + - Acompanha status do seu evento + - Visualiza fotos do evento + - Eventos criados entram em status "Aguardando Aprovação" + +--- + +## 📊 Status de Eventos + +Os eventos seguem um workflow com os seguintes status: + +| Status | Descrição | Cor | +|--------|-----------|-----| +| `Aguardando Aprovação` | Cliente criou, aguarda aprovação da empresa | Cinza | +| `Em Planejamento` | Aprovado, em fase de planejamento | Azul | +| `Confirmado` | Evento confirmado e agendado | Verde | +| `Em Execução` | Evento acontecendo | Roxo | +| `Entregue` | Fotos entregues ao cliente | Verde escuro | +| `Arquivado` | Evento finalizado e arquivado | Cinza escuro | + +--- + +## 🛠️ Tecnologias Utilizadas + +### Core +- **React 19.2.0** - Biblioteca JavaScript para UI +- **TypeScript 5.8.2** - Superset tipado do JavaScript +- **Vite 6.2.0** - Build tool e dev server ultra-rápido + +### UI/UX +- **Lucide React 0.554.0** - Ícones modernos e customizáveis +- **TailwindCSS** - Framework CSS utility-first (configurado via classes inline) + +### Mapas e Geolocalização +- **Mapbox GL 3.16.0** - Mapas interativos e geolocalização +- **@types/mapbox-gl 3.4.1** - Tipos TypeScript para Mapbox + +### Navegação +- **React Router DOM 7.9.6** - Sistema de roteamento e navegação + +### IA e APIs +- **@google/genai 1.30.0** - Integração com Google Gemini AI + +### Build Tools +- **@vitejs/plugin-react 5.0.0** - Plugin oficial do Vite para React +- **@types/node 22.14.0** - Tipos TypeScript para Node.js + +--- + +## 📁 Estrutura do Projeto + +``` +photum/ +├── frontend/ # Aplicação Frontend +│ ├── components/ # Componentes reutilizáveis +│ │ ├── Button.tsx # Botão customizado +│ │ ├── EventCard.tsx # Card de evento +│ │ ├── EventForm.tsx # Formulário de evento +│ │ ├── Input.tsx # Input customizado +│ │ ├── InstitutionForm.tsx # Formulário de instituições +│ │ ├── MapboxMap.tsx # Componente de mapa interativo +│ │ └── Navbar.tsx # Barra de navegação +│ ├── contexts/ # Context API +│ │ ├── AuthContext.tsx # Autenticação e usuários +│ │ └── DataContext.tsx # Gerenciamento de eventos e instituições +│ ├── pages/ # Páginas principais +│ │ ├── Calendar.tsx # Calendário de eventos +│ │ ├── Dashboard.tsx # Dashboard principal +│ │ ├── Finance.tsx # Gestão financeira +│ │ ├── Home.tsx # Landing page +│ │ ├── Inspiration.tsx # Galeria de inspirações +│ │ ├── LGPD.tsx # Conformidade LGPD +│ │ ├── Login.tsx # Tela de login +│ │ ├── PrivacyPolicy.tsx # Política de privacidade +│ │ ├── Register.tsx # Cadastro de usuários +│ │ ├── Settings.tsx # Configurações +│ │ ├── Team.tsx # Gestão de equipe +│ │ └── TermsOfUse.tsx # Termos de uso +│ ├── services/ # Serviços e APIs +│ │ ├── genaiService.ts # Integração Google GenAI +│ │ ├── mapboxService.ts # Serviços Mapbox +│ │ └── mockGeoService.ts # Mock de geolocalização +│ ├── public/ # Arquivos estáticos +│ ├── App.tsx # Componente raiz + roteamento +│ ├── constants.ts # Constantes globais +│ ├── types.ts # Tipos TypeScript +│ ├── index.tsx # Entry point +│ ├── package.json # Dependências +│ ├── tsconfig.json # Config TypeScript +│ ├── vite.config.ts # Config Vite +│ └── README.md # Documentação do frontend +│ +├── backend/ # Backend (em desenvolvimento) +│ └── .gitkeep +│ +└── README.md # Este arquivo +``` + +--- + +## 🎨 Temas e Design System + +### Cores da Marca + +```css +/* Cores principais */ +--brand-purple: #9333ea (roxo vibrante - cor primária) +--brand-black: #000000 (preto puro) +--brand-white: #ffffff (branco puro) + +/* Status Colors (definidas em constants.ts) */ +Aguardando Aprovação: #6b7280 (gray-500) +Em Planejamento: #3b82f6 (blue-500) +Confirmado: #10b981 (green-500) +Em Execução: #8b5cf6 (purple-500) +Entregue: #059669 (emerald-600) +Arquivado: #4b5563 (gray-600) +``` + +### Tipografia + +- **Títulos e Headings**: System Font Stack +- **Corpo e Parágrafos**: System Font Stack +- **Tamanhos**: Sistema responsivo com classes Tailwind (text-sm, text-base, text-lg, etc.) + +### Componentes Visuais + +- **Cards**: Sombras suaves, bordas arredondadas +- **Botões**: Variantes primary (roxo), secondary (preto), danger (vermelho) +- **Inputs**: Bordas cinza, foco com anel roxo +- **Navbar**: Gradiente roxo com transparência + +--- + +## 🔄 Workflows do Sistema + +### Workflow de Criação de Evento (Cliente) + +``` +1. Cliente faz login + ↓ +2. Acessa "Solicitar Evento" + ↓ +3. Preenche formulário (nome, tipo, data, endereço, contatos) + ↓ +4. Evento criado com status "Aguardando Aprovação" + ↓ +5. Empresa visualiza solicitação + ↓ +6. Empresa aprova → Status muda para "Confirmado" + ↓ +7. Empresa atribui fotógrafo + ↓ +8. Fotógrafo acessa evento e realiza trabalho + ↓ +9. Status atualizado conforme workflow + ↓ +10. Cliente visualiza fotos e álbum final +``` + +### Workflow de Gestão (Empresa) + +``` +1. Empresa cria evento diretamente (status: "Em Planejamento") + ↓ +2. Adiciona informações detalhadas + ↓ +3. Atribui fotógrafos à equipe + ↓ +4. Confirma evento (status: "Confirmado") + ↓ +5. Acompanha execução + ↓ +6. Marca como entregue após conclusão +``` + +--- + +## 🧪 Dados de Teste (Mock) + +O sistema utiliza dados mockados no frontend para demonstração: + +### Usuários Mock (AuthContext.tsx) +- 4 usuários pré-cadastrados com diferentes perfis (ver seção de Login) + +### Eventos Mock (DataContext.tsx) +- Eventos de exemplo de formaturas e casamentos +- Diferentes status para demonstrar o workflow completo +- Atribuições de fotógrafos e instituições + +### Instituições Mock (DataContext.tsx) +- Universidade Federal do Rio Grande do Sul (UFRGS) +- Exemplos de outras instituições de ensino + +--- + +## 🚧 Funcionalidades em Desenvolvimento + +### Backend +- API RESTful completa +- Banco de dados relacional +- Autenticação JWT +- Upload e armazenamento de fotos + +### Frontend +As seguintes funcionalidades estão parcialmente implementadas: +- **Team** - Gestão completa de equipe e fotógrafos +- **Finance** - Módulo financeiro com relatórios +- **Calendar** - Calendário completo com múltiplas visualizações +- **Settings** - Painel de configurações avançadas + +--- + +## 📝 Scripts Disponíveis + +### Frontend + +| Comando | Descrição | +|---------|-----------| +| `npm run dev` | Inicia servidor de desenvolvimento Vite (porta 3000) | +| `npm run build` | Gera build de produção otimizado | +| `npm run preview` | Preview do build de produção | + +### Backend + +_Em desenvolvimento_ + +--- + +## 🤝 Contribuindo + +Este é um projeto em desenvolvimento ativo. Contribuições são bem-vindas! + +### Branch Strategy +- **main**: Branch de produção estável +- **dev**: Branch de desenvolvimento ativo (branch padrão para PRs) + +### Como Contribuir +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 para a branch `dev` + +--- + +## 📄 Licença + +Projeto privado - Todos os direitos reservados © 2025 Photum Formaturas + +--- + +## 📞 Suporte e Contato + +### Repositório e Issues +- **GitHub**: [github.com/rede5/photum](https://github.com/rede5/photum) +- **Issues**: Abra uma issue no GitHub para reportar bugs ou sugerir melhorias + +### Contato Comercial +- **Email**: contato@photum.com.br +- **Telefone**: (19) 3405-5024 | (19) 3621-4621 +- **Localização**: Americana, SP + +### Redes Sociais +- Instagram: @photumformaturas +- Facebook: /photumformaturas +- YouTube: Photum Formaturas + +--- + +## 🎯 Roadmap Futuro + +### Curto Prazo (Q1 2025) +- [x] Sistema básico de gestão de eventos +- [x] Autenticação multi-perfil +- [x] Dashboard responsivo +- [x] Integração com Mapbox +- [ ] Sistema completo de upload de fotos +- [ ] Módulo de calendário funcional + +### Médio Prazo (Q2-Q3 2025) +- [ ] Backend completo com API REST +- [ ] Banco de dados PostgreSQL +- [ ] Sistema de notificações em tempo real +- [ ] Módulo financeiro completo +- [ ] Gestão de equipe avançada +- [ ] Sistema de relatórios e analytics + +### Longo Prazo (Q4 2025 e além) +- [ ] App Mobile (React Native) +- [ ] Integração com APIs de pagamento (Stripe, PagSeguro) +- [ ] Assinatura digital de contratos +- [ ] Exportação de relatórios PDF/Excel +- [ ] Sistema de galeria privada para clientes +- [ ] Integração com CRM +- [ ] Automação de email marketing +- [ ] Sistema de agendamento online + +--- + +## 🏆 Diferenciais do Projeto + +- ✨ **Interface Moderna**: Design clean e intuitivo com foco em UX +- 🎓 **Especialização**: Focado especificamente em formaturas e eventos acadêmicos +- 🗺️ **Geolocalização**: Mapas interativos para localização de eventos +- 🤖 **IA Integrada**: Google GenAI para funcionalidades inteligentes +- 📱 **Responsivo**: Funciona perfeitamente em dispositivos móveis +- 🔐 **Seguro**: Conformidade com LGPD e boas práticas de segurança +- 🎨 **Customizável**: Sistema de temas e personalização + +--- + +**Desenvolvido com ❤️ para eternizar momentos únicos** ✨📸 diff --git a/frontend/README.md b/frontend/README.md index e0e54ed..ff83932 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,397 +1,356 @@ -# 📸 Photum Manager +# Frontend - Photum Formaturas -Sistema de gestão completa para eventos fotográficos premium. Plataforma moderna para gerenciamento de eventos, fotógrafos, clientes e entregas, com foco em excelência e atendimento humanizado. +Sistema de gerenciamento de eventos e formaturas desenvolvido com React, TypeScript e Vite. ---- +## 📋 Índice -## 🎯 Visão Geral +- [Tecnologias](#tecnologias) +- [Estrutura do Projeto](#estrutura-do-projeto) +- [Instalação](#instalação) +- [Scripts Disponíveis](#scripts-disponíveis) +- [Arquitetura](#arquitetura) +- [Componentes](#componentes) +- [Páginas](#páginas) +- [Contextos](#contextos) +- [Serviços](#serviços) +- [Tipos](#tipos) +- [Configuração](#configuração) -O **Photum Manager** é uma aplicação web desenvolvida em React + TypeScript que centraliza todo o fluxo de trabalho de uma empresa de fotografia de eventos, desde a solicitação inicial do cliente até a entrega final do álbum. +## 🚀 Tecnologias -### Principais Funcionalidades - -- ✅ **Gestão Multi-perfil**: Suporte para 4 tipos de usuários (Superadmin, Empresa, Fotógrafo, Cliente) -- ✅ **Controle de Eventos**: CRUD completo de eventos com status workflow -- ✅ **Dashboard Personalizado**: Interface adaptada por perfil de usuário -- ✅ **Sistema de Aprovações**: Workflow de aprovação de eventos para clientes -- ✅ **Gestão de Equipe**: Atribuição de fotógrafos aos eventos -- ✅ **Upload de Fotos**: Sistema de anexos e galeria (em desenvolvimento) -- ✅ **Integração com IA**: Google GenAI para funcionalidades avançadas - ---- - -## 🚀 Como Executar o Projeto - -### Pré-requisitos - -- **Node.js** (versão 16 ou superior) -- **npm** ou **yarn** - -### Instalação - -1. **Clone o repositório**: - ```bash - git clone https://github.com/rede5/photum-frontend.git - cd photum-frontend - ``` - -2. **Instale as dependências**: - ```bash - npm install - ``` - -3. **Configure a API do Gemini** (opcional): - - Crie um arquivo `.env.local` na raiz do projeto - - Adicione sua chave de API: - ``` - GEMINI_API_KEY=sua_chave_aqui - ``` - -4. **Execute o projeto em modo desenvolvimento**: - ```bash - npm run dev - ``` - -5. **Acesse no navegador**: - ``` - http://localhost:5173 - ``` - -### Build para Produção - -```bash -npm run build -npm run preview -``` - ---- - -## 🗺️ Rotas e Navegação - -O sistema utiliza um **roteamento customizado baseado em estados** (sem React Router). As rotas disponíveis são: - -| Rota | Descrição | Acesso | -|------|-----------|--------| -| `/` (`home`) | Landing page institucional | Público | -| `/login` | Tela de autenticação | Público | -| `/dashboard` | Dashboard principal (Lista de eventos) | Autenticado | -| `/events` | Mesma view de dashboard | Autenticado | -| `/request-event` | Formulário de criação de evento | Autenticado | -| `/uploads` | Gerenciamento de uploads de fotos | Autenticado | -| `/team` | Gestão de equipe e fotógrafos | 🚧 Em desenvolvimento | -| `/finance` | Módulo financeiro | 🚧 Em desenvolvimento | -| `/calendar` | Agenda de eventos | 🚧 Em desenvolvimento | -| `/settings` | Configurações | 🚧 Em desenvolvimento | -| `/albums` | Álbuns de fotos | 🚧 Em desenvolvimento | - -### Navegação no Sistema - -A navegação acontece através do componente `` que chama a função `onNavigate(pageName)` passando o nome da rota desejada. Rotas protegidas redirecionam automaticamente para `/login` se o usuário não estiver autenticado. - ---- - -## 🔐 Tela de Login e Usuários de Demonstração - -### Como Acessar - -1. Na página inicial, clique em **"Área do Cliente"** -2. Você será redirecionado para a **tela de login** (`/login`) - -### Interface de Login - -A tela de login apresenta: -- **Layout dividido**: - - Lado esquerdo com imagem institucional - - Lado direito com formulário de login -- **Campos**: - - E-mail corporativo ou pessoal - - Senha (desabilitada no modo demo) -- **Botão**: "Entrar no Sistema" - -### Usuários de Demonstração - -Não é necessário senha. Basta clicar em um dos cartões de usuário demo ou digitar o e-mail: - -| Perfil | Nome | E-mail | Descrição | -|--------|------|--------|-----------| -| **Superadmin** | Dev Admin | `admin@photum.com` | Acesso total ao sistema | -| **Empresa** | Carlos CEO | `empresa@photum.com` | Dono da empresa de fotografia | -| **Fotógrafo** | Ana Lente | `foto@photum.com` | Profissional fotógrafo | -| **Cliente** | Juliana Noiva | `cliente@photum.com` | Cliente final (dono do evento) | - -### Fluxo de Login - -``` -1. Usuário clica em "Área do Cliente" na Home - ↓ -2. Sistema redireciona para /login - ↓ -3. Usuário seleciona um perfil demo OU digita e-mail manualmente - ↓ -4. Sistema valida o e-mail com mock de usuários - ↓ -5. Se válido: redireciona para /dashboard - Se inválido: exibe mensagem de erro -``` - -### Exemplo de Código (Login) - -```tsx -// Login simplificado (sem senha) -const handleLogin = async (e: React.FormEvent) => { - e.preventDefault(); - const success = await login(email); // Busca no mock de usuários - if (!success) { - setError('Usuário não encontrado'); - } -}; -``` - ---- - -## 👥 Perfis de Usuário e Permissões - -### 1. Superadmin (`SUPERADMIN`) -- **Acesso**: Total ao sistema -- **Funcionalidades**: - - Visualiza todos os eventos - - Gerencia todos os usuários - - Acesso a configurações avançadas - -### 2. Dono da Empresa (`BUSINESS_OWNER`) -- **Acesso**: Administrativo -- **Funcionalidades**: - - Cria e edita eventos - - Atribui fotógrafos - - Aprova solicitações de clientes - - Gerencia equipe - -### 3. Fotógrafo (`PHOTOGRAPHER`) -- **Acesso**: Operacional -- **Funcionalidades**: - - Visualiza eventos atribuídos - - Atualiza status de eventos - - Faz upload de fotos - - Acessa detalhes de contatos - -### 4. Cliente (`EVENT_OWNER`) -- **Acesso**: Restrito aos próprios eventos -- **Funcionalidades**: - - Solicita novos eventos - - Acompanha status do seu evento - - Visualiza fotos do evento - - Eventos criados entram em status "Aguardando Aprovação" - ---- - -## 📊 Status de Eventos - -Os eventos seguem um workflow com os seguintes status: - -| Status | Descrição | Cor | -|--------|-----------|-----| -| `Aguardando Aprovação` | Cliente criou, aguarda aprovação da empresa | Cinza | -| `Em Planejamento` | Aprovado, em fase de planejamento | Azul | -| `Confirmado` | Evento confirmado e agendado | Verde | -| `Em Execução` | Evento acontecendo | Roxo | -| `Entregue` | Fotos entregues ao cliente | Verde escuro | -| `Arquivado` | Evento finalizado e arquivado | Cinza escuro | - ---- - -## 🛠️ Tecnologias Utilizadas - -### Core -- **React 19.2.0** - Biblioteca JavaScript para UI -- **TypeScript 5.8.2** - Superset tipado do JavaScript -- **Vite 6.2.0** - Build tool e dev server ultra-rápido - -### UI/UX -- **Lucide React** - Ícones modernos e customizáveis -- **TailwindCSS** - Framework CSS utility-first (configurado via classes) - -### IA e APIs -- **@google/genai 1.30.0** - Integração com Google Gemini AI - -### Build Tools -- **@vitejs/plugin-react 5.0.0** - Plugin oficial do Vite para React -- **@types/node 22.14.0** - Tipos TypeScript para Node.js - ---- +- **React 19.2.0** - Biblioteca para construção de interfaces +- **TypeScript 5.8.2** - Superset JavaScript com tipagem estática +- **Vite 6.2.0** - Build tool e dev server de alta performance +- **React Router DOM 7.9.6** - Navegação entre páginas +- **Mapbox GL 3.16.0** - Mapas interativos +- **Google GenAI 1.30.0** - Integração com IA generativa do Google +- **Lucide React 0.554.0** - Ícones modernos ## 📁 Estrutura do Projeto ``` -photum-forms/ +frontend/ ├── components/ # Componentes reutilizáveis -│ ├── Button.tsx # Botão customizado -│ ├── EventCard.tsx # Card de evento -│ ├── EventForm.tsx # Formulário de evento -│ ├── Input.tsx # Input customizado -│ └── Navbar.tsx # Barra de navegação -├── contexts/ # Context API -│ ├── AuthContext.tsx # Autenticação e usuários -│ └── DataContext.tsx # Gerenciamento de eventos -├── pages/ # Páginas principais -│ ├── Dashboard.tsx # Dashboard principal -│ ├── Home.tsx # Landing page -│ └── Login.tsx # Tela de login -├── services/ # Serviços e APIs -│ ├── genaiService.ts # Integração Google GenAI -│ └── mockGeoService.ts # Mock de geolocalização -├── App.tsx # Componente raiz + roteamento -├── constants.ts # Constantes globais -├── types.ts # Tipos TypeScript -├── index.tsx # Entry point -├── package.json # Dependências -├── tsconfig.json # Config TypeScript -└── vite.config.ts # Config Vite +│ ├── Button.tsx # Botão customizável +│ ├── EventCard.tsx # Card de exibição de eventos +│ ├── EventForm.tsx # Formulário de criação/edição de eventos +│ ├── Input.tsx # Input customizável +│ ├── InstitutionForm.tsx # Formulário de instituições +│ ├── MapboxMap.tsx # Componente de mapa interativo +│ └── Navbar.tsx # Barra de navegação +│ +├── contexts/ # Context API para gerenciamento de estado +│ ├── AuthContext.tsx # Autenticação e usuários +│ └── DataContext.tsx # Eventos e instituições +│ +├── pages/ # Páginas da aplicação +│ ├── Calendar.tsx # Calendário de eventos +│ ├── Dashboard.tsx # Painel principal +│ ├── Finance.tsx # Gestão financeira +│ ├── Home.tsx # Página inicial/landing +│ ├── Inspiration.tsx # Galeria de inspirações +│ ├── LGPD.tsx # Página de conformidade LGPD +│ ├── Login.tsx # Página de login +│ ├── PrivacyPolicy.tsx # Política de privacidade +│ ├── Register.tsx # Cadastro de novos usuários +│ ├── Settings.tsx # Configurações do sistema +│ ├── Team.tsx # Gestão de equipe +│ └── TermsOfUse.tsx # Termos de uso +│ +├── services/ # Serviços externos e APIs +│ ├── genaiService.ts # Integração com Google GenAI +│ ├── mapboxService.ts # Serviços do Mapbox +│ └── mockGeoService.ts # Mock para testes de geolocalização +│ +├── public/ # Arquivos estáticos +├── App.tsx # Componente raiz da aplicação +├── index.tsx # Ponto de entrada da aplicação +├── types.ts # Definições de tipos TypeScript +├── constants.ts # Constantes da aplicação +├── vite.config.ts # Configuração do Vite +├── tsconfig.json # Configuração do TypeScript +└── package.json # Dependências e scripts ``` ---- +## 🔧 Instalação -## 🎨 Temas e Design System +```bash +# Instalar dependências +npm install -### Cores da Marca +# Configurar variáveis de ambiente +cp .env.example .env.local -```css -/* Cores principais */ ---brand-black: #000000 ---brand-gold: #c5a059 ---brand-white: #ffffff - -/* Status Colors (definidas em constants.ts) */ -Aguardando: #6b7280 (gray) -Planejamento: #3b82f6 (blue) -Confirmado: #10b981 (green) -Em Execução: #8b5cf6 (purple) -Entregue: #059669 (emerald) -Arquivado: #4b5563 (gray-dark) +# Editar .env.local com suas credenciais +# VITE_MAPBOX_TOKEN=seu_token_aqui +# GEMINI_API_KEY=sua_chave_aqui ``` -### Tipografia +## 📜 Scripts Disponíveis -- **Títulos**: Font Serif (elegante e sofisticada) -- **Corpo**: Font Sans (moderna e legível) -- **Tamanhos**: Sistema responsivo com classes Tailwind +```bash +# Iniciar servidor de desenvolvimento (porta 3000) +npm run dev ---- +# Build para produção +npm run build -## 🔄 Workflows do Sistema - -### Workflow de Criação de Evento (Cliente) - -``` -1. Cliente faz login - ↓ -2. Acessa "Solicitar Evento" - ↓ -3. Preenche formulário (nome, tipo, data, endereço, contatos) - ↓ -4. Evento criado com status "Aguardando Aprovação" - ↓ -5. Empresa visualiza solicitação - ↓ -6. Empresa aprova → Status muda para "Confirmado" - ↓ -7. Empresa atribui fotógrafo - ↓ -8. Fotógrafo acessa evento e realiza trabalho - ↓ -9. Status atualizado conforme workflow - ↓ -10. Cliente visualiza fotos e álbum final +# Preview da build de produção +npm run preview ``` -### Workflow de Gestão (Empresa) +## 🏗️ Arquitetura -``` -1. Empresa cria evento diretamente (status: "Em Planejamento") - ↓ -2. Adiciona informações detalhadas - ↓ -3. Atribui fotógrafos à equipe - ↓ -4. Confirma evento (status: "Confirmado") - ↓ -5. Acompanha execução - ↓ -6. Marca como entregue após conclusão +### Gerenciamento de Estado + +O projeto utiliza **Context API** do React para gerenciar estado global: + +- **AuthContext**: Gerencia autenticação, usuários e permissões +- **DataContext**: Gerencia eventos, instituições e dados relacionados + +### Roteamento + +Navegação baseada em estados internos controlada pelo componente `App.tsx`, sem uso de React Router para simplicidade. + +### Estilização + +Utiliza **Tailwind CSS** (via classes inline) com tema customizado: +- Cores principais: roxo (`brand-purple`) e preto (`brand-black`) +- Design responsivo mobile-first +- Componentes reutilizáveis estilizados + +## 🧩 Componentes + +### Button.tsx +Botão reutilizável com variantes de estilo e estados de carregamento. + +### EventCard.tsx +Card para exibição visual de eventos com informações principais (data, tipo, status). + +### EventForm.tsx +Formulário completo para criar e editar eventos com validação de campos. + +### Input.tsx +Input customizado com suporte a diferentes tipos e validação. + +### InstitutionForm.tsx +Formulário para cadastro e edição de instituições de ensino. + +### MapboxMap.tsx +Componente de mapa interativo usando Mapbox GL para visualização de localizações. + +### Navbar.tsx +Barra de navegação responsiva com menu e controle de autenticação. + +## 📄 Páginas + +### Home.tsx +Landing page com apresentação da empresa, serviços e informações de contato. + +### Login.tsx / Register.tsx +Páginas de autenticação para acesso ao sistema. + +### Dashboard.tsx +Painel principal com visualização e gerenciamento de eventos. Possui duas visualizações: +- **Lista de eventos**: Visão geral dos eventos +- **Criar evento**: Formulário de criação + +### Calendar.tsx +Visualização de eventos em formato de calendário mensal. + +### Team.tsx +Gestão da equipe de fotógrafos e colaboradores. + +### Finance.tsx +Controle financeiro e relatórios de eventos. + +### Settings.tsx +Configurações do sistema e preferências do usuário. + +### Inspiration.tsx +Galeria de fotos e inspirações para clientes. + +### PrivacyPolicy.tsx / TermsOfUse.tsx / LGPD.tsx +Páginas legais e de conformidade. + +## 🔄 Contextos + +### AuthContext + +```typescript +interface AuthContextType { + user: User | null; + login: (email: string) => Promise; + logout: () => void; + availableUsers: User[]; // Para demo +} ``` ---- +**Usuários Mock Disponíveis:** +- SuperAdmin: `admin@photum.com` +- Business Owner: `empresa@photum.com` +- Fotógrafo: `foto@photum.com` +- Cliente: `cliente@photum.com` -## 🧪 Dados de Teste (Mock) +### DataContext -O sistema utiliza dados mockados para demonstração: +```typescript +interface DataContextType { + events: EventData[]; + institutions: Institution[]; + addEvent: (event: EventData) => void; + updateEventStatus: (id: string, status: EventStatus) => void; + assignPhotographer: (eventId: string, photographerId: string) => void; + getEventsByRole: (userId: string, role: string) => EventData[]; + addInstitution: (institution: Institution) => void; + updateInstitution: (id: string, institution: Partial) => void; + getInstitutionsByUserId: (userId: string) => Institution[]; + getInstitutionById: (id: string) => Institution | undefined; +} +``` -### Usuários Mock -- 4 usuários pré-cadastrados (ver seção de Login) +## 🛠️ Serviços -### Eventos Mock -- Eventos de exemplo criados no `DataContext.tsx` -- Incluem diferentes tipos: Casamentos, Corporativos, Aniversários -- Variados status para demonstrar o workflow +### genaiService.ts +Integração com Google Gemini AI para funcionalidades de IA generativa. ---- +### mapboxService.ts +Serviços de mapeamento e geolocalização usando Mapbox API. -## 🚧 Funcionalidades em Desenvolvimento +### mockGeoService.ts +Serviço mock para testes de geolocalização sem consumir API externa. -As seguintes rotas exibem tela de "Em construção": -- `/team` - Gestão de Equipe e Fotógrafos -- `/finance` - Módulo Financeiro -- `/calendar` - Agenda Completa -- `/settings` - Configurações do Sistema -- `/albums` - Galeria de Álbuns +## 📝 Tipos ---- +### UserRole (Enum) +- `SUPERADMIN`: Acesso total ao sistema +- `BUSINESS_OWNER`: Proprietário do negócio +- `EVENT_OWNER`: Cliente/dono do evento +- `PHOTOGRAPHER`: Fotógrafo -## 📝 Scripts Disponíveis +### EventStatus (Enum) +- `PENDING_APPROVAL`: Aguardando aprovação +- `PLANNING`: Em planejamento +- `CONFIRMED`: Confirmado +- `IN_PROGRESS`: Em execução +- `DELIVERED`: Entregue +- `ARCHIVED`: Arquivado -| Comando | Descrição | -|---------|-----------| -| `npm run dev` | Inicia servidor de desenvolvimento (Vite) | -| `npm run build` | Gera build de produção otimizado | -| `npm run preview` | Preview do build de produção | +### EventType (Enum) +- `WEDDING`: Casamento +- `CORPORATE`: Corporativo +- `BIRTHDAY`: Aniversário +- `DEBUTANTE`: Debutante +- `OTHER`: Outro ---- +### Interfaces Principais -## 🤝 Contribuindo +```typescript +interface User { + id: string; + name: string; + email: string; + role: UserRole; + avatar?: string; + institutionId?: string; +} -Este é um projeto em desenvolvimento ativo. Contribuições são bem-vindas! +interface Institution { + id: string; + name: string; + type: string; + cnpj?: string; + phone: string; + email: string; + address?: Address; + description?: string; + ownerId: string; +} -### Branch Strategy -- **main**: Produção -- **dev**: Desenvolvimento ativo (branch atual) +interface EventData { + id: string; + name: string; + date: string; + time: string; + type: EventType; + status: EventStatus; + address: Address; + contacts: Contact[]; + checklist: ChecklistItem[]; + briefing: string; + coverImage: string; + ownerId: string; + photographerIds: string[]; + institutionId?: string; +} +``` ---- +## ⚙️ Configuração -## 📄 Licença +### vite.config.ts -Projeto privado - Todos os direitos reservados © 2024 PhotumFormaturas +```typescript +- Porta padrão: 3000 +- Host: 0.0.0.0 (acesso externo) +- Variáveis de ambiente: GEMINI_API_KEY +- Alias: '@' aponta para a raiz do frontend +``` ---- +### Variáveis de Ambiente + +Crie um arquivo `.env.local`: + +```env +VITE_MAPBOX_TOKEN=seu_token_mapbox +GEMINI_API_KEY=sua_chave_gemini +``` + +## 🎨 Design System + +### Cores Principais +- **brand-purple**: Cor primária da marca +- **brand-black**: Cor secundária/texto +- Tons de cinza para backgrounds e bordas + +### Breakpoints Responsivos +- Mobile: < 640px +- Tablet: 640px - 1024px +- Desktop: > 1024px + +## 📱 Funcionalidades + +- ✅ Autenticação multi-perfil (SuperAdmin, Owner, Photographer, Client) +- ✅ CRUD completo de eventos +- ✅ Gestão de instituições de ensino +- ✅ Calendário visual de eventos +- ✅ Mapas interativos com Mapbox +- ✅ Sistema de checklists para eventos +- ✅ Galeria de inspirações +- ✅ Gestão de equipe +- ✅ Controle financeiro +- ✅ Páginas de conformidade legal (LGPD, Termos, Privacidade) + +## 🔒 Segurança + +- Autenticação baseada em contexto +- Validação de permissões por role +- Proteção de rotas baseada em autenticação +- Conformidade com LGPD + +## 🚧 Desenvolvimento + +O projeto está configurado com: +- Hot Module Replacement (HMR) +- TypeScript strict mode +- Linting automático +- Path aliases ## 📞 Suporte -Para dúvidas ou suporte: -- **Repositório**: [github.com/rede5/photum-frontend](https://github.com/rede5/photum-frontend) -- **Issues**: Abra uma issue no GitHub +Para dúvidas ou problemas: +- Email: contato@photum.com.br +- Tel: (19) 3405 5024 | (19) 3621 4621 --- -## 🎯 Roadmap Futuro - -- [ ] Implementar módulo de Agenda/Calendário -- [ ] Sistema completo de Upload de Fotos -- [ ] Módulo Financeiro (Pagamentos e Orçamentos) -- [ ] Gestão de Equipe completa -- [ ] Sistema de Notificações em tempo real -- [ ] App Mobile (React Native) -- [ ] Integração com APIs de pagamento -- [ ] Assinatura digital de contratos -- [ ] Exportação de relatórios PDF - ---- - -**Desenvolvido com ❤️ para eternizar momentos únicos** ✨📸 +**Desenvolvido por Photum Formaturas** © 2025