📸 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:

   git clone https://github.com/rede5/photum-frontend.git
   cd photum-frontend
   

2. Instale as dependências:

   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:

   npm run dev
   

5. Acesse no navegador:

   http://localhost:5173
   

Build para Produção

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)

// 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

/* 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
• 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 ✨📸