docs: atualização na documentação do projeto, e criação da documentaçãoo do frontend
This commit is contained in:
João Vitor
parent
38ebeba237
commit
87dd11e6b4
2 changed files with 817 additions and 348 deletions
510
README.md
Normal file
510
README.md
Normal file
|
|
@ -0,0 +1,510 @@
|
|||
# 📸 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** ✨📸
|
||||
|
|
@ -1,397 +1,356 @@
|
|||
# 📸 Photum Manager
|
||||
# Frontend - Photum Formaturas
|
||||
|
||||
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.
|
||||
Sistema de gerenciamento de eventos e formaturas desenvolvido com React, TypeScript e Vite.
|
||||
|
||||
---
|
||||
## 📋 Índice
|
||||
|
||||
## 🎯 Visão Geral
|
||||
- [Tecnologias](#tecnologias)
|
||||
- [Estrutura do Projeto](#estrutura-do-projeto)
|
||||
- [Instalação](#instalação)
|
||||
- [Scripts Disponíveis](#scripts-disponíveis)
|
||||
- [Arquitetura](#arquitetura)
|
||||
- [Componentes](#componentes)
|
||||
- [Páginas](#páginas)
|
||||
- [Contextos](#contextos)
|
||||
- [Serviços](#serviços)
|
||||
- [Tipos](#tipos)
|
||||
- [Configuração](#configuração)
|
||||
|
||||
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.
|
||||
## 🚀 Tecnologias
|
||||
|
||||
### 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
|
||||
|
||||
---
|
||||
- **React 19.2.0** - Biblioteca para construção de interfaces
|
||||
- **TypeScript 5.8.2** - Superset JavaScript com tipagem estática
|
||||
- **Vite 6.2.0** - Build tool e dev server de alta performance
|
||||
- **React Router DOM 7.9.6** - Navegação entre páginas
|
||||
- **Mapbox GL 3.16.0** - Mapas interativos
|
||||
- **Google GenAI 1.30.0** - Integração com IA generativa do Google
|
||||
- **Lucide React 0.554.0** - Ícones modernos
|
||||
|
||||
## 📁 Estrutura do Projeto
|
||||
|
||||
```
|
||||
photum-forms/
|
||||
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
|
||||
│ └── 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
|
||||
│ ├── Button.tsx # Botão customizável
|
||||
│ ├── EventCard.tsx # Card de exibição de eventos
|
||||
│ ├── EventForm.tsx # Formulário de criação/edição de eventos
|
||||
│ ├── Input.tsx # Input customizável
|
||||
│ ├── InstitutionForm.tsx # Formulário de instituições
|
||||
│ ├── MapboxMap.tsx # Componente de mapa interativo
|
||||
│ └── Navbar.tsx # Barra de navegação
|
||||
│
|
||||
├── contexts/ # Context API para gerenciamento de estado
|
||||
│ ├── AuthContext.tsx # Autenticação e usuários
|
||||
│ └── DataContext.tsx # Eventos e instituições
|
||||
│
|
||||
├── pages/ # Páginas da aplicação
|
||||
│ ├── Calendar.tsx # Calendário de eventos
|
||||
│ ├── Dashboard.tsx # Painel principal
|
||||
│ ├── Finance.tsx # Gestão financeira
|
||||
│ ├── Home.tsx # Página inicial/landing
|
||||
│ ├── Inspiration.tsx # Galeria de inspirações
|
||||
│ ├── LGPD.tsx # Página de conformidade LGPD
|
||||
│ ├── Login.tsx # Página de login
|
||||
│ ├── PrivacyPolicy.tsx # Política de privacidade
|
||||
│ ├── Register.tsx # Cadastro de novos usuários
|
||||
│ ├── Settings.tsx # Configurações do sistema
|
||||
│ ├── Team.tsx # Gestão de equipe
|
||||
│ └── TermsOfUse.tsx # Termos de uso
|
||||
│
|
||||
├── services/ # Serviços externos e APIs
|
||||
│ ├── genaiService.ts # Integração com Google GenAI
|
||||
│ ├── mapboxService.ts # Serviços do Mapbox
|
||||
│ └── mockGeoService.ts # Mock para testes de geolocalização
|
||||
│
|
||||
├── public/ # Arquivos estáticos
|
||||
├── App.tsx # Componente raiz da aplicação
|
||||
├── index.tsx # Ponto de entrada da aplicação
|
||||
├── types.ts # Definições de tipos TypeScript
|
||||
├── constants.ts # Constantes da aplicação
|
||||
├── vite.config.ts # Configuração do Vite
|
||||
├── tsconfig.json # Configuração do TypeScript
|
||||
└── package.json # Dependências e scripts
|
||||
```
|
||||
|
||||
---
|
||||
## 🔧 Instalação
|
||||
|
||||
## 🎨 Temas e Design System
|
||||
```bash
|
||||
# Instalar dependências
|
||||
npm install
|
||||
|
||||
### Cores da Marca
|
||||
# Configurar variáveis de ambiente
|
||||
cp .env.example .env.local
|
||||
|
||||
```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)
|
||||
# Editar .env.local com suas credenciais
|
||||
# VITE_MAPBOX_TOKEN=seu_token_aqui
|
||||
# GEMINI_API_KEY=sua_chave_aqui
|
||||
```
|
||||
|
||||
### Tipografia
|
||||
## 📜 Scripts Disponíveis
|
||||
|
||||
- **Títulos**: Font Serif (elegante e sofisticada)
|
||||
- **Corpo**: Font Sans (moderna e legível)
|
||||
- **Tamanhos**: Sistema responsivo com classes Tailwind
|
||||
```bash
|
||||
# Iniciar servidor de desenvolvimento (porta 3000)
|
||||
npm run dev
|
||||
|
||||
---
|
||||
# Build para produção
|
||||
npm run build
|
||||
|
||||
## 🔄 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
|
||||
# Preview da build de produção
|
||||
npm run preview
|
||||
```
|
||||
|
||||
### Workflow de Gestão (Empresa)
|
||||
## 🏗️ Arquitetura
|
||||
|
||||
```
|
||||
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
|
||||
### Gerenciamento de Estado
|
||||
|
||||
O projeto utiliza **Context API** do React para gerenciar estado global:
|
||||
|
||||
- **AuthContext**: Gerencia autenticação, usuários e permissões
|
||||
- **DataContext**: Gerencia eventos, instituições e dados relacionados
|
||||
|
||||
### Roteamento
|
||||
|
||||
Navegação baseada em estados internos controlada pelo componente `App.tsx`, sem uso de React Router para simplicidade.
|
||||
|
||||
### 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
|
||||
|
||||
## 🧩 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
|
||||
|
||||
### AuthContext
|
||||
|
||||
```typescript
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
login: (email: string) => Promise<boolean>;
|
||||
logout: () => void;
|
||||
availableUsers: User[]; // Para demo
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
**Usuários Mock Disponíveis:**
|
||||
- SuperAdmin: `admin@photum.com`
|
||||
- Business Owner: `empresa@photum.com`
|
||||
- Fotógrafo: `foto@photum.com`
|
||||
- Cliente: `cliente@photum.com`
|
||||
|
||||
## 🧪 Dados de Teste (Mock)
|
||||
### DataContext
|
||||
|
||||
O sistema utiliza dados mockados para demonstração:
|
||||
```typescript
|
||||
interface DataContextType {
|
||||
events: EventData[];
|
||||
institutions: Institution[];
|
||||
addEvent: (event: EventData) => void;
|
||||
updateEventStatus: (id: string, status: EventStatus) => void;
|
||||
assignPhotographer: (eventId: string, photographerId: string) => void;
|
||||
getEventsByRole: (userId: string, role: string) => EventData[];
|
||||
addInstitution: (institution: Institution) => void;
|
||||
updateInstitution: (id: string, institution: Partial<Institution>) => void;
|
||||
getInstitutionsByUserId: (userId: string) => Institution[];
|
||||
getInstitutionById: (id: string) => Institution | undefined;
|
||||
}
|
||||
```
|
||||
|
||||
### Usuários Mock
|
||||
- 4 usuários pré-cadastrados (ver seção de Login)
|
||||
## 🛠️ Serviços
|
||||
|
||||
### Eventos Mock
|
||||
- Eventos de exemplo criados no `DataContext.tsx`
|
||||
- Incluem diferentes tipos: Casamentos, Corporativos, Aniversários
|
||||
- Variados status para demonstrar o workflow
|
||||
### 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.
|
||||
|
||||
## 🚧 Funcionalidades em Desenvolvimento
|
||||
### mockGeoService.ts
|
||||
Serviço mock para testes de geolocalização sem consumir API externa.
|
||||
|
||||
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
|
||||
## 📝 Tipos
|
||||
|
||||
---
|
||||
### UserRole (Enum)
|
||||
- `SUPERADMIN`: Acesso total ao sistema
|
||||
- `BUSINESS_OWNER`: Proprietário do negócio
|
||||
- `EVENT_OWNER`: Cliente/dono do evento
|
||||
- `PHOTOGRAPHER`: Fotógrafo
|
||||
|
||||
## 📝 Scripts Disponíveis
|
||||
### EventStatus (Enum)
|
||||
- `PENDING_APPROVAL`: Aguardando aprovação
|
||||
- `PLANNING`: Em planejamento
|
||||
- `CONFIRMED`: Confirmado
|
||||
- `IN_PROGRESS`: Em execução
|
||||
- `DELIVERED`: Entregue
|
||||
- `ARCHIVED`: Arquivado
|
||||
|
||||
| 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 |
|
||||
### EventType (Enum)
|
||||
- `WEDDING`: Casamento
|
||||
- `CORPORATE`: Corporativo
|
||||
- `BIRTHDAY`: Aniversário
|
||||
- `DEBUTANTE`: Debutante
|
||||
- `OTHER`: Outro
|
||||
|
||||
---
|
||||
### Interfaces Principais
|
||||
|
||||
## 🤝 Contribuindo
|
||||
```typescript
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: UserRole;
|
||||
avatar?: string;
|
||||
institutionId?: string;
|
||||
}
|
||||
|
||||
Este é um projeto em desenvolvimento ativo. Contribuições são bem-vindas!
|
||||
interface Institution {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
cnpj?: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
address?: Address;
|
||||
description?: string;
|
||||
ownerId: string;
|
||||
}
|
||||
|
||||
### Branch Strategy
|
||||
- **main**: Produção
|
||||
- **dev**: Desenvolvimento ativo (branch atual)
|
||||
interface EventData {
|
||||
id: string;
|
||||
name: string;
|
||||
date: string;
|
||||
time: string;
|
||||
type: EventType;
|
||||
status: EventStatus;
|
||||
address: Address;
|
||||
contacts: Contact[];
|
||||
checklist: ChecklistItem[];
|
||||
briefing: string;
|
||||
coverImage: string;
|
||||
ownerId: string;
|
||||
photographerIds: string[];
|
||||
institutionId?: string;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
## ⚙️ Configuração
|
||||
|
||||
## 📄 Licença
|
||||
### vite.config.ts
|
||||
|
||||
Projeto privado - Todos os direitos reservados © 2024 PhotumFormaturas
|
||||
```typescript
|
||||
- Porta padrão: 3000
|
||||
- Host: 0.0.0.0 (acesso externo)
|
||||
- Variáveis de ambiente: GEMINI_API_KEY
|
||||
- Alias: '@' aponta para a raiz do frontend
|
||||
```
|
||||
|
||||
---
|
||||
### Variáveis de Ambiente
|
||||
|
||||
Crie um arquivo `.env.local`:
|
||||
|
||||
```env
|
||||
VITE_MAPBOX_TOKEN=seu_token_mapbox
|
||||
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
|
||||
|
||||
## 📱 Funcionalidades
|
||||
|
||||
- ✅ Autenticação multi-perfil (SuperAdmin, Owner, Photographer, Client)
|
||||
- ✅ CRUD completo de eventos
|
||||
- ✅ Gestão de instituições de ensino
|
||||
- ✅ Calendário visual de eventos
|
||||
- ✅ Mapas interativos com Mapbox
|
||||
- ✅ Sistema de checklists para eventos
|
||||
- ✅ Galeria de inspirações
|
||||
- ✅ Gestão de equipe
|
||||
- ✅ Controle financeiro
|
||||
- ✅ Páginas de conformidade legal (LGPD, Termos, Privacidade)
|
||||
|
||||
## 🔒 Segurança
|
||||
|
||||
- Autenticação baseada em contexto
|
||||
- Validação de permissões por role
|
||||
- Proteção de rotas baseada em autenticação
|
||||
- Conformidade com LGPD
|
||||
|
||||
## 🚧 Desenvolvimento
|
||||
|
||||
O projeto está configurado com:
|
||||
- Hot Module Replacement (HMR)
|
||||
- TypeScript strict mode
|
||||
- Linting automático
|
||||
- Path aliases
|
||||
|
||||
## 📞 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
|
||||
Para dúvidas ou problemas:
|
||||
- Email: contato@photum.com.br
|
||||
- Tel: (19) 3405 5024 | (19) 3621 4621
|
||||
|
||||
---
|
||||
|
||||
## 🎯 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** ✨📸
|
||||
**Desenvolvido por Photum Formaturas** © 2025
|
||||
|
|
|
|||
Loading…
Reference in a new issue