rede5/photum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: atualização nas documentações

Browse source
This commit is contained in:
João Vitor 2025-12-03 14:13:06 -03:00
parent 87dd11e6b4
commit 3b53bf1d84
2 changed files with 95 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
README.md
View file

@ -43,17 +43,20 @@ photum/
#### Frontend #### Frontend
1. **Clone o repositório**: 1. **Clone o repositório**:
```bash ```bash
git clone https://github.com/rede5/photum.git git clone https://github.com/rede5/photum.git
cd photum/frontend cd photum/frontend
``` ```
2. **Instale as dependências**: 2. **Instale as dependências**:
```bash ```bash
npm install npm install
``` ```
3. **Configure as variáveis de ambiente**: 3. **Configure as variáveis de ambiente**:
- Crie um arquivo `.env.local` na pasta `frontend` - Crie um arquivo `.env.local` na pasta `frontend`
- Adicione suas credenciais: - Adicione suas credenciais:
```env ```env
@ -62,6 +65,7 @@ photum/
``` ```
4. **Execute o projeto em modo desenvolvimento**: 4. **Execute o projeto em modo desenvolvimento**:
```bash ```bash
npm run dev 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: O sistema utiliza um **roteamento customizado baseado em estados** (sem React Router). As rotas disponíveis são:
| Rota | Descrição | Acesso | | Rota | Descrição | Acesso |
|------|-----------|--------| | ---------------- | ----------------------------------------------------- | ----------- |
| `/` (`home`) | Landing page institucional com informações da empresa | Público | | `/` (`home`) | Landing page institucional com informações da empresa | Público |
| `/login` | Tela de autenticação | Público | | `/login` | Tela de autenticação | Público |
| `/register` | Cadastro de novos usuários e instituições | Público | | `/register` | Cadastro de novos usuários e instituições | Público |
| `/dashboard` | Dashboard principal (Lista de eventos) | Autenticado | | `/dashboard` | Dashboard principal (Lista de eventos) | Autenticado |
| `/events` | Visualização de eventos | Autenticado | | `/events` | Visualização de eventos | Autenticado |
| `/request-event` | Formulário de criação de evento de formatura | Autenticado | | `/request-event` | Formulário de criação de evento de formatura | Autenticado |
| `/inspiration` | Galeria de inspirações e trabalhos anteriores | Autenticado | | `/inspiration` | Galeria de inspirações e trabalhos anteriores | Autenticado |
| `/calendar` | Calendário de eventos de formatura | Autenticado | | `/calendar` | Calendário de eventos de formatura | Autenticado |
| `/team` | Gestão de equipe e fotógrafos | Autenticado | | `/team` | Gestão de equipe e fotógrafos | Autenticado |
| `/finance` | Módulo financeiro e controle de pagamentos | Autenticado | | `/finance` | Módulo financeiro e controle de pagamentos | Autenticado |
| `/settings` | Configurações do sistema e perfil | Autenticado | | `/settings` | Configurações do sistema e perfil | Autenticado |
| `/privacy` | Política de privacidade | Público | | `/privacy` | Política de privacidade | Público |
| `/terms` | Termos de uso | Público | | `/terms` | Termos de uso | Público |
| `/lgpd` | Informações sobre conformidade LGPD | Público | | `/lgpd` | Informações sobre conformidade LGPD | Público |
### Navegação no Sistema ### Navegação no Sistema
@ -118,7 +122,8 @@ A navegação acontece através do componente `<Navbar>` que chama a função `o
### Interface de Login ### Interface de Login
A tela de login apresenta: A tela de login apresenta:
- **Layout dividido**:
- **Layout dividido**:
- Lado esquerdo com imagem institucional - Lado esquerdo com imagem institucional
- Lado direito com formulário de login - Lado direito com formulário de login
- **Campos**: - **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: 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 | | Perfil | Nome | E-mail | Descrição |
|--------|------|--------|-----------| | -------------- | ------------- | -------------------- | ------------------------------ |
| **Superadmin** | Dev Admin | `admin@photum.com` | Acesso total ao sistema | | **Superadmin** | Dev Admin | `admin@photum.com` | Acesso total ao sistema |
| **Empresa** | Carlos CEO | `empresa@photum.com` | Dono da empresa de fotografia | | **Empresa** | Carlos CEO | `empresa@photum.com` | Dono da empresa de fotografia |
| **Fotógrafo** | Ana Lente | `foto@photum.com` | Profissional fotógrafo | | **Fotógrafo** | Ana Lente | `foto@photum.com` | Profissional fotógrafo |
| **Cliente** | Juliana Noiva | `cliente@photum.com` | Cliente final (dono do evento) | | **Cliente** | Juliana Noiva | `cliente@photum.com` | Cliente final (dono do evento) |
### Fluxo de Login ### Fluxo de Login
@ -160,7 +165,7 @@ const handleLogin = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
const success = await login(email); // Busca no mock de usuários const success = await login(email); // Busca no mock de usuários
if (!success) { 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 ## 👥 Perfis de Usuário e Permissões
### 1. Superadmin (`SUPERADMIN`) ### 1. Superadmin (`SUPERADMIN`)
- **Acesso**: Total ao sistema - **Acesso**: Total ao sistema
- **Funcionalidades**: - **Funcionalidades**:
- Visualiza todos os eventos - Visualiza todos os eventos
@ -177,6 +183,7 @@ const handleLogin = async (e: React.FormEvent) => {
- Acesso a configurações avançadas - Acesso a configurações avançadas
### 2. Dono da Empresa (`BUSINESS_OWNER`) ### 2. Dono da Empresa (`BUSINESS_OWNER`)
- **Acesso**: Administrativo - **Acesso**: Administrativo
- **Funcionalidades**: - **Funcionalidades**:
- Cria e edita eventos - Cria e edita eventos
@ -185,6 +192,7 @@ const handleLogin = async (e: React.FormEvent) => {
- Gerencia equipe - Gerencia equipe
### 3. Fotógrafo (`PHOTOGRAPHER`) ### 3. Fotógrafo (`PHOTOGRAPHER`)
- **Acesso**: Operacional - **Acesso**: Operacional
- **Funcionalidades**: - **Funcionalidades**:
- Visualiza eventos atribuídos - Visualiza eventos atribuídos
@ -193,6 +201,7 @@ const handleLogin = async (e: React.FormEvent) => {
- Acessa detalhes de contatos - Acessa detalhes de contatos
### 4. Cliente (`EVENT_OWNER`) ### 4. Cliente (`EVENT_OWNER`)
- **Acesso**: Restrito aos próprios eventos - **Acesso**: Restrito aos próprios eventos
- **Funcionalidades**: - **Funcionalidades**:
- Solicita novos eventos - Solicita novos eventos
@ -206,39 +215,45 @@ const handleLogin = async (e: React.FormEvent) => {
Os eventos seguem um workflow com os seguintes status: Os eventos seguem um workflow com os seguintes status:
| Status | Descrição | Cor | | Status | Descrição | Cor |
|--------|-----------|-----| | ---------------------- | ------------------------------------------- | ------------ |
| `Aguardando Aprovação` | Cliente criou, aguarda aprovação da empresa | Cinza | | `Aguardando Aprovação` | Cliente criou, aguarda aprovação da empresa | Cinza |
| `Em Planejamento` | Aprovado, em fase de planejamento | Azul | | `Em Planejamento` | Aprovado, em fase de planejamento | Azul |
| `Confirmado` | Evento confirmado e agendado | Verde | | `Confirmado` | Evento confirmado e agendado | Verde |
| `Em Execução` | Evento acontecendo | Roxo | | `Em Execução` | Evento acontecendo | Roxo |
| `Entregue` | Fotos entregues ao cliente | Verde escuro | | `Entregue` | Fotos entregues ao cliente | Verde escuro |
| `Arquivado` | Evento finalizado e arquivado | Cinza escuro | | `Arquivado` | Evento finalizado e arquivado | Cinza escuro |
--- ---
## 🛠️ Tecnologias Utilizadas ## 🛠️ Tecnologias Utilizadas
### Core ### Core
- **React 19.2.0** - Biblioteca JavaScript para UI - **React 19.2.0** - Biblioteca JavaScript para UI
- **TypeScript 5.8.2** - Superset tipado do JavaScript - **TypeScript 5.8.2** - Superset tipado do JavaScript
- **Vite 6.2.0** - Build tool e dev server ultra-rápido - **Vite 6.2.0** - Build tool e dev server ultra-rápido
### UI/UX ### UI/UX
- **Lucide React 0.554.0** - Ícones modernos e customizáveis - **Lucide React 0.554.0** - Ícones modernos e customizáveis
- **TailwindCSS** - Framework CSS utility-first (configurado via classes inline) - **TailwindCSS** - Framework CSS utility-first (configurado via classes inline)
### Mapas e Geolocalização ### Mapas e Geolocalização
- **Mapbox GL 3.16.0** - Mapas interativos e geolocalização - **Mapbox GL 3.16.0** - Mapas interativos e geolocalização
- **@types/mapbox-gl 3.4.1** - Tipos TypeScript para Mapbox - **@types/mapbox-gl 3.4.1** - Tipos TypeScript para Mapbox
### Navegação ### Navegação
- **React Router DOM 7.9.6** - Sistema de roteamento e navegação - **React Router DOM 7.9.6** - Sistema de roteamento e navegação
### IA e APIs ### IA e APIs
- **@google/genai 1.30.0** - Integração com Google Gemini AI - **@google/genai 1.30.0** - Integração com Google Gemini AI
### Build Tools ### Build Tools
- **@vitejs/plugin-react 5.0.0** - Plugin oficial do Vite para React - **@vitejs/plugin-react 5.0.0** - Plugin oficial do Vite para React
- **@types/node 22.14.0** - Tipos TypeScript para Node.js - **@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: O sistema utiliza dados mockados no frontend para demonstração:
### Usuários Mock (AuthContext.tsx) ### Usuários Mock (AuthContext.tsx)
- 4 usuários pré-cadastrados com diferentes perfis (ver seção de Login) - 4 usuários pré-cadastrados com diferentes perfis (ver seção de Login)
### Eventos Mock (DataContext.tsx) ### Eventos Mock (DataContext.tsx)
- Eventos de exemplo de formaturas e casamentos - Eventos de exemplo de formaturas e casamentos
- Diferentes status para demonstrar o workflow completo - Diferentes status para demonstrar o workflow completo
- Atribuições de fotógrafos e instituições - Atribuições de fotógrafos e instituições
### Instituições Mock (DataContext.tsx) ### Instituições Mock (DataContext.tsx)
- Universidade Federal do Rio Grande do Sul (UFRGS) - Universidade Federal do Rio Grande do Sul (UFRGS)
- Exemplos de outras instituições de ensino - Exemplos de outras instituições de ensino
@ -394,13 +412,16 @@ O sistema utiliza dados mockados no frontend para demonstração:
## 🚧 Funcionalidades em Desenvolvimento ## 🚧 Funcionalidades em Desenvolvimento
### Backend ### Backend
- API RESTful completa - API RESTful completa
- Banco de dados relacional - Banco de dados relacional
- Autenticação JWT - Autenticação JWT
- Upload e armazenamento de fotos - Upload e armazenamento de fotos
### Frontend ### Frontend
As seguintes funcionalidades estão parcialmente implementadas: As seguintes funcionalidades estão parcialmente implementadas:
- **Team** - Gestão completa de equipe e fotógrafos - **Team** - Gestão completa de equipe e fotógrafos
- **Finance** - Módulo financeiro com relatórios - **Finance** - Módulo financeiro com relatórios
- **Calendar** - Calendário completo com múltiplas visualizações - **Calendar** - Calendário completo com múltiplas visualizações
@ -412,11 +433,11 @@ As seguintes funcionalidades estão parcialmente implementadas:
### Frontend ### Frontend
| Comando | Descrição | | Comando | Descrição |
|---------|-----------| | ----------------- | ---------------------------------------------------- |
| `npm run dev` | Inicia servidor de desenvolvimento Vite (porta 3000) | | `npm run dev` | Inicia servidor de desenvolvimento Vite (porta 3000) |
| `npm run build` | Gera build de produção otimizado | | `npm run build` | Gera build de produção otimizado |
| `npm run preview` | Preview do build de produção | | `npm run preview` | Preview do build de produção |
### Backend ### Backend
@ -429,10 +450,12 @@ _Em desenvolvimento_
Este é um projeto em desenvolvimento ativo. Contribuições são bem-vindas! Este é um projeto em desenvolvimento ativo. Contribuições são bem-vindas!
### Branch Strategy ### Branch Strategy
- **main**: Branch de produção estável - **main**: Branch de produção estável
- **dev**: Branch de desenvolvimento ativo (branch padrão para PRs) - **dev**: Branch de desenvolvimento ativo (branch padrão para PRs)
### Como Contribuir ### Como Contribuir
1. Fork o projeto 1. Fork o projeto
2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`) 2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
3. Commit suas mudanças (`git commit -m 'Add some 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 ## 📞 Suporte e Contato
### Repositório e Issues ### Repositório e Issues
- **GitHub**: [github.com/rede5/photum](https://github.com/rede5/photum) - **GitHub**: [github.com/rede5/photum](https://github.com/rede5/photum)
- **Issues**: Abra uma issue no GitHub para reportar bugs ou sugerir melhorias - **Issues**: Abra uma issue no GitHub para reportar bugs ou sugerir melhorias
### Contato Comercial ### Contato Comercial
- **Email**: contato@photum.com.br - **Email**: contato@photum.com.br
- **Telefone**: (19) 3405-5024 | (19) 3621-4621 - **Telefone**: (19) 3405-5024 | (19) 3621-4621
- **Localização**: Americana, SP - **Localização**: Americana, SP
### Redes Sociais ### Redes Sociais
- Instagram: @photumformaturas - Instagram: @photumformaturas
- Facebook: /photumformaturas - Facebook: /photumformaturas
- YouTube: Photum Formaturas - YouTube: Photum Formaturas
@ -468,6 +494,7 @@ Projeto privado - Todos os direitos reservados © 2025 Photum Formaturas
## 🎯 Roadmap Futuro ## 🎯 Roadmap Futuro
### Curto Prazo (Q1 2025) ### Curto Prazo (Q1 2025)
- [x] Sistema básico de gestão de eventos - [x] Sistema básico de gestão de eventos
- [x] Autenticação multi-perfil - [x] Autenticação multi-perfil
- [x] Dashboard responsivo - [x] Dashboard responsivo
@ -476,6 +503,7 @@ Projeto privado - Todos os direitos reservados © 2025 Photum Formaturas
- [ ] Módulo de calendário funcional - [ ] Módulo de calendário funcional
### Médio Prazo (Q2-Q3 2025) ### Médio Prazo (Q2-Q3 2025)
- [ ] Backend completo com API REST - [ ] Backend completo com API REST
- [ ] Banco de dados PostgreSQL - [ ] Banco de dados PostgreSQL
- [ ] Sistema de notificações em tempo real - [ ] 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 - [ ] Sistema de relatórios e analytics
### Longo Prazo (Q4 2025 e além) ### Longo Prazo (Q4 2025 e além)
- [ ] App Mobile (React Native) - [ ] App Mobile (React Native)
- [ ] Integração com APIs de pagamento (Stripe, PagSeguro) - [ ] Integração com APIs de pagamento (Stripe, PagSeguro)
- [ ] Assinatura digital de contratos - [ ] Assinatura digital de contratos

29
frontend/README.md
View file

@ -115,6 +115,7 @@ Navegação baseada em estados internos controlada pelo componente `App.tsx`, se
### Estilização ### Estilização
Utiliza **Tailwind CSS** (via classes inline) com tema customizado: Utiliza **Tailwind CSS** (via classes inline) com tema customizado:
- Cores principais: roxo (`brand-purple`) e preto (`brand-black`) - Cores principais: roxo (`brand-purple`) e preto (`brand-black`)
- Design responsivo mobile-first - Design responsivo mobile-first
- Componentes reutilizáveis estilizados - Componentes reutilizáveis estilizados
@ -122,55 +123,72 @@ Utiliza **Tailwind CSS** (via classes inline) com tema customizado:
## 🧩 Componentes ## 🧩 Componentes
### Button.tsx ### Button.tsx
Botão reutilizável com variantes de estilo e estados de carregamento. Botão reutilizável com variantes de estilo e estados de carregamento.
### EventCard.tsx ### EventCard.tsx
Card para exibição visual de eventos com informações principais (data, tipo, status). Card para exibição visual de eventos com informações principais (data, tipo, status).
### EventForm.tsx ### EventForm.tsx
Formulário completo para criar e editar eventos com validação de campos. Formulário completo para criar e editar eventos com validação de campos.
### Input.tsx ### Input.tsx
Input customizado com suporte a diferentes tipos e validação. Input customizado com suporte a diferentes tipos e validação.
### InstitutionForm.tsx ### InstitutionForm.tsx
Formulário para cadastro e edição de instituições de ensino. Formulário para cadastro e edição de instituições de ensino.
### MapboxMap.tsx ### MapboxMap.tsx
Componente de mapa interativo usando Mapbox GL para visualização de localizações. Componente de mapa interativo usando Mapbox GL para visualização de localizações.
### Navbar.tsx ### Navbar.tsx
Barra de navegação responsiva com menu e controle de autenticação. Barra de navegação responsiva com menu e controle de autenticação.
## 📄 Páginas ## 📄 Páginas
### Home.tsx ### Home.tsx
Landing page com apresentação da empresa, serviços e informações de contato. Landing page com apresentação da empresa, serviços e informações de contato.
### Login.tsx / Register.tsx ### Login.tsx / Register.tsx
Páginas de autenticação para acesso ao sistema. Páginas de autenticação para acesso ao sistema.
### Dashboard.tsx ### Dashboard.tsx
Painel principal com visualização e gerenciamento de eventos. Possui duas visualizações: Painel principal com visualização e gerenciamento de eventos. Possui duas visualizações:
- **Lista de eventos**: Visão geral dos eventos - **Lista de eventos**: Visão geral dos eventos
- **Criar evento**: Formulário de criação - **Criar evento**: Formulário de criação
### Calendar.tsx ### Calendar.tsx
Visualização de eventos em formato de calendário mensal. Visualização de eventos em formato de calendário mensal.
### Team.tsx ### Team.tsx
Gestão da equipe de fotógrafos e colaboradores. Gestão da equipe de fotógrafos e colaboradores.
### Finance.tsx ### Finance.tsx
Controle financeiro e relatórios de eventos. Controle financeiro e relatórios de eventos.
### Settings.tsx ### Settings.tsx
Configurações do sistema e preferências do usuário. Configurações do sistema e preferências do usuário.
### Inspiration.tsx ### Inspiration.tsx
Galeria de fotos e inspirações para clientes. Galeria de fotos e inspirações para clientes.
### PrivacyPolicy.tsx / TermsOfUse.tsx / LGPD.tsx ### PrivacyPolicy.tsx / TermsOfUse.tsx / LGPD.tsx
Páginas legais e de conformidade. Páginas legais e de conformidade.
## 🔄 Contextos ## 🔄 Contextos
@ -187,6 +205,7 @@ interface AuthContextType {
``` ```
**Usuários Mock Disponíveis:** **Usuários Mock Disponíveis:**
- SuperAdmin: `admin@photum.com` - SuperAdmin: `admin@photum.com`
- Business Owner: `empresa@photum.com` - Business Owner: `empresa@photum.com`
- Fotógrafo: `foto@photum.com` - Fotógrafo: `foto@photum.com`
@ -212,23 +231,28 @@ interface DataContextType {
## 🛠️ Serviços ## 🛠️ Serviços
### genaiService.ts ### genaiService.ts
Integração com Google Gemini AI para funcionalidades de IA generativa. Integração com Google Gemini AI para funcionalidades de IA generativa.
### mapboxService.ts ### mapboxService.ts
Serviços de mapeamento e geolocalização usando Mapbox API. Serviços de mapeamento e geolocalização usando Mapbox API.
### mockGeoService.ts ### mockGeoService.ts
Serviço mock para testes de geolocalização sem consumir API externa. Serviço mock para testes de geolocalização sem consumir API externa.
## 📝 Tipos ## 📝 Tipos
### UserRole (Enum) ### UserRole (Enum)
- `SUPERADMIN`: Acesso total ao sistema - `SUPERADMIN`: Acesso total ao sistema
- `BUSINESS_OWNER`: Proprietário do negócio - `BUSINESS_OWNER`: Proprietário do negócio
- `EVENT_OWNER`: Cliente/dono do evento - `EVENT_OWNER`: Cliente/dono do evento
- `PHOTOGRAPHER`: Fotógrafo - `PHOTOGRAPHER`: Fotógrafo
### EventStatus (Enum) ### EventStatus (Enum)
- `PENDING_APPROVAL`: Aguardando aprovação - `PENDING_APPROVAL`: Aguardando aprovação
- `PLANNING`: Em planejamento - `PLANNING`: Em planejamento
- `CONFIRMED`: Confirmado - `CONFIRMED`: Confirmado
@ -237,6 +261,7 @@ Serviço mock para testes de geolocalização sem consumir API externa.
- `ARCHIVED`: Arquivado - `ARCHIVED`: Arquivado
### EventType (Enum) ### EventType (Enum)
- `WEDDING`: Casamento - `WEDDING`: Casamento
- `CORPORATE`: Corporativo - `CORPORATE`: Corporativo
- `BIRTHDAY`: Aniversário - `BIRTHDAY`: Aniversário
@ -308,11 +333,13 @@ GEMINI_API_KEY=sua_chave_gemini
## 🎨 Design System ## 🎨 Design System
### Cores Principais ### Cores Principais
- **brand-purple**: Cor primária da marca - **brand-purple**: Cor primária da marca
- **brand-black**: Cor secundária/texto - **brand-black**: Cor secundária/texto
- Tons de cinza para backgrounds e bordas - Tons de cinza para backgrounds e bordas
### Breakpoints Responsivos ### Breakpoints Responsivos
- Mobile: < 640px - Mobile: < 640px
- Tablet: 640px - 1024px - Tablet: 640px - 1024px
- Desktop: > 1024px - Desktop: > 1024px
@ -340,6 +367,7 @@ GEMINI_API_KEY=sua_chave_gemini
## 🚧 Desenvolvimento ## 🚧 Desenvolvimento
O projeto está configurado com: O projeto está configurado com:
- Hot Module Replacement (HMR) - Hot Module Replacement (HMR)
- TypeScript strict mode - TypeScript strict mode
- Linting automático - Linting automático
@ -348,6 +376,7 @@ O projeto está configurado com:
## 📞 Suporte ## 📞 Suporte
Para dúvidas ou problemas: Para dúvidas ou problemas:
- Email: contato@photum.com.br - Email: contato@photum.com.br
- Tel: (19) 3405 5024 | (19) 3621 4621 - Tel: (19) 3405 5024 | (19) 3621 4621