docs: projeto documentado
This commit is contained in:
João Vitor
parent
ca76bf4e82
commit
b793f7dca4
1 changed files with 390 additions and 13 deletions
403
README.md
403
README.md
|
|
@ -1,20 +1,397 @@
|
|||
<div align="center">
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
# 📸 Photum Manager
|
||||
|
||||
# Run and deploy your AI Studio appp
|
||||
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.
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
---
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/drive/1Rd4siG8Ot2v0r3XhTNfIYrylHVUvYJmm
|
||||
## 🎯 Visão Geral
|
||||
|
||||
## Run Locally
|
||||
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.
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
### 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
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
---
|
||||
|
||||
## 🚀 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** ✨📸
|
||||
|
|
|
|||
Loading…
Reference in a new issue