397 lines
11 KiB
Markdown
397 lines
11 KiB
Markdown
# 📸 Photum Manager
|
|
|
|
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.
|
|
|
|
---
|
|
|
|
## 🎯 Visão Geral
|
|
|
|
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.
|
|
|
|
### 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 `<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** - Í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
|
|
|
|
---
|
|
|
|
## 📁 Estrutura do Projeto
|
|
|
|
```
|
|
photum-forms/
|
|
├── 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
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Temas e Design System
|
|
|
|
### Cores da Marca
|
|
|
|
```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)
|
|
```
|
|
|
|
### Tipografia
|
|
|
|
- **Títulos**: Font Serif (elegante e sofisticada)
|
|
- **Corpo**: Font Sans (moderna e legível)
|
|
- **Tamanhos**: Sistema responsivo com classes Tailwind
|
|
|
|
---
|
|
|
|
## 🔄 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 para demonstração:
|
|
|
|
### Usuários Mock
|
|
- 4 usuários pré-cadastrados (ver seção de Login)
|
|
|
|
### Eventos Mock
|
|
- Eventos de exemplo criados no `DataContext.tsx`
|
|
- Incluem diferentes tipos: Casamentos, Corporativos, Aniversários
|
|
- Variados status para demonstrar o workflow
|
|
|
|
---
|
|
|
|
## 🚧 Funcionalidades em Desenvolvimento
|
|
|
|
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
|
|
|
|
---
|
|
|
|
## 📝 Scripts Disponíveis
|
|
|
|
| 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 |
|
|
|
|
---
|
|
|
|
## 🤝 Contribuindo
|
|
|
|
Este é um projeto em desenvolvimento ativo. Contribuições são bem-vindas!
|
|
|
|
### Branch Strategy
|
|
- **main**: Produção
|
|
- **dev**: Desenvolvimento ativo (branch atual)
|
|
|
|
---
|
|
|
|
## 📄 Licença
|
|
|
|
Projeto privado - Todos os direitos reservados © 2024 PhotumManager
|
|
|
|
---
|
|
|
|
## 📞 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
|
|
|
|
---
|
|
|
|
## 🎯 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** ✨📸
|