# 📸 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 PhotumFormaturas

---

## 📞 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** ✨📸