539 lines
17 KiB
Markdown
539 lines
17 KiB
Markdown
# 📸 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 `<Navbar>` 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** ✨📸
|