diff --git a/README.md b/README.md index 86e8e5b..3f772bc 100644 --- a/README.md +++ b/README.md @@ -43,17 +43,20 @@ photum/ #### 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 @@ -62,6 +65,7 @@ photum/ ``` 4. **Execute o projeto em modo desenvolvimento**: + ```bash npm run dev ``` @@ -85,22 +89,22 @@ npm run preview 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 | +| 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 @@ -118,7 +122,8 @@ A navegação acontece através do componente `` que chama a função `o ### Interface de Login A tela de login apresenta: -- **Layout dividido**: + +- **Layout dividido**: - Lado esquerdo com imagem institucional - Lado direito com formulário de login - **Campos**: @@ -130,12 +135,12 @@ A tela de login apresenta: 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) | +| 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 @@ -160,7 +165,7 @@ 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'); + setError("Usuário não encontrado"); } }; ``` @@ -170,6 +175,7 @@ const handleLogin = async (e: React.FormEvent) => { ## 👥 Perfis de Usuário e Permissões ### 1. Superadmin (`SUPERADMIN`) + - **Acesso**: Total ao sistema - **Funcionalidades**: - Visualiza todos os eventos @@ -177,6 +183,7 @@ const handleLogin = async (e: React.FormEvent) => { - Acesso a configurações avançadas ### 2. Dono da Empresa (`BUSINESS_OWNER`) + - **Acesso**: Administrativo - **Funcionalidades**: - Cria e edita eventos @@ -185,6 +192,7 @@ const handleLogin = async (e: React.FormEvent) => { - Gerencia equipe ### 3. Fotógrafo (`PHOTOGRAPHER`) + - **Acesso**: Operacional - **Funcionalidades**: - Visualiza eventos atribuídos @@ -193,6 +201,7 @@ const handleLogin = async (e: React.FormEvent) => { - Acessa detalhes de contatos ### 4. Cliente (`EVENT_OWNER`) + - **Acesso**: Restrito aos próprios eventos - **Funcionalidades**: - Solicita novos eventos @@ -206,39 +215,45 @@ const handleLogin = async (e: React.FormEvent) => { 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 | +| 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 @@ -378,14 +393,17 @@ Arquivado: #4b5563 (gray-600) 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 @@ -394,13 +412,16 @@ O sistema utiliza dados mockados no frontend para demonstração: ## 🚧 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 @@ -412,11 +433,11 @@ As seguintes funcionalidades estão parcialmente implementadas: ### 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 | +| 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 @@ -429,10 +450,12 @@ _Em desenvolvimento_ 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'`) @@ -450,15 +473,18 @@ 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 @@ -468,6 +494,7 @@ Projeto privado - Todos os direitos reservados © 2025 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 @@ -476,6 +503,7 @@ Projeto privado - Todos os direitos reservados © 2025 Photum Formaturas - [ ] 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 @@ -484,6 +512,7 @@ Projeto privado - Todos os direitos reservados © 2025 Photum Formaturas - [ ] 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 diff --git a/frontend/README.md b/frontend/README.md index ff83932..2883d33 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -115,6 +115,7 @@ Navegação baseada em estados internos controlada pelo componente `App.tsx`, se ### 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 @@ -122,55 +123,72 @@ Utiliza **Tailwind CSS** (via classes inline) com tema customizado: ## 🧩 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 @@ -187,6 +205,7 @@ interface AuthContextType { ``` **Usuários Mock Disponíveis:** + - SuperAdmin: `admin@photum.com` - Business Owner: `empresa@photum.com` - Fotógrafo: `foto@photum.com` @@ -212,23 +231,28 @@ interface DataContextType { ## 🛠️ Serviços ### 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. ### mockGeoService.ts + Serviço mock para testes de geolocalização sem consumir API externa. ## 📝 Tipos ### UserRole (Enum) + - `SUPERADMIN`: Acesso total ao sistema - `BUSINESS_OWNER`: Proprietário do negócio - `EVENT_OWNER`: Cliente/dono do evento - `PHOTOGRAPHER`: Fotógrafo ### EventStatus (Enum) + - `PENDING_APPROVAL`: Aguardando aprovação - `PLANNING`: Em planejamento - `CONFIRMED`: Confirmado @@ -237,6 +261,7 @@ Serviço mock para testes de geolocalização sem consumir API externa. - `ARCHIVED`: Arquivado ### EventType (Enum) + - `WEDDING`: Casamento - `CORPORATE`: Corporativo - `BIRTHDAY`: Aniversário @@ -308,11 +333,13 @@ 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 @@ -340,6 +367,7 @@ GEMINI_API_KEY=sua_chave_gemini ## 🚧 Desenvolvimento O projeto está configurado com: + - Hot Module Replacement (HMR) - TypeScript strict mode - Linting automático @@ -348,6 +376,7 @@ O projeto está configurado com: ## 📞 Suporte Para dúvidas ou problemas: + - Email: contato@photum.com.br - Tel: (19) 3405 5024 | (19) 3621 4621