docs: atualização nas documentações
This commit is contained in:
João Vitor
parent
87dd11e6b4
commit
3b53bf1d84
2 changed files with 95 additions and 37 deletions
103
README.md
103
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 `<Navbar>` 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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue