João Vitor 3b53bf1d84 docs: atualização nas documentações

2025-12-03 14:13:06 -03:00

17 KiB

Raw Blame History

📸 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

Clone o repositório:

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

Instale as dependências:
```
npm install
```
Configure as variáveis de ambiente:
- Crie um arquivo .env.local na pasta frontend
- Adicione suas credenciais:
```
VITE_MAPBOX_TOKEN=seu_token_mapbox_aqui
GEMINI_API_KEY=sua_chave_gemini_aqui
```
Execute o projeto em modo desenvolvimento:
```
npm run dev
```
Acesse no navegador:
```
http://localhost:3000
```

Build para Produção

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.

Como Acessar

Na página inicial, clique em "Área do Cliente"
Você será redirecionado para a tela de login (/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)

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

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

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

Fork o projeto
Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
Commit suas mudanças (git commit -m 'Add some AmazingFeature')
Push para a branch (git push origin feature/AmazingFeature)
Abra um Pull Request para a branch dev

📄 Licença

📞 Suporte e Contato

Repositório e Issues

GitHub: 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)

Sistema básico de gestão de eventos
Autenticação multi-perfil
Dashboard responsivo
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 ✨📸

17 KiB Raw Blame History

📸 Photum - Sistema de Gestão de Formaturas

🎯 Visão Geral

Principais Funcionalidades

🚀 Como Executar o Projeto

Pré-requisitos

Estrutura do Repositório

Instalação e Execução

Frontend

Build para Produção

🗺️ Rotas e Navegação

Navegação no Sistema

🔐 Tela de Login e Usuários de Demonstração

Como Acessar

Interface de Login

Usuários de Demonstração

Fluxo de Login

Exemplo de Código (Login)

👥 Perfis de Usuário e Permissões

1. Superadmin (SUPERADMIN)

2. Dono da Empresa (BUSINESS_OWNER)

3. Fotógrafo (PHOTOGRAPHER)

4. Cliente (EVENT_OWNER)

📊 Status de Eventos

🛠️ Tecnologias Utilizadas

Core

UI/UX

Mapas e Geolocalização

Navegação

IA e APIs

Build Tools

📁 Estrutura do Projeto

🎨 Temas e Design System

Cores da Marca

Tipografia

Componentes Visuais

🔄 Workflows do Sistema

Workflow de Criação de Evento (Cliente)

Workflow de Gestão (Empresa)

🧪 Dados de Teste (Mock)

Usuários Mock (AuthContext.tsx)

Eventos Mock (DataContext.tsx)

Instituições Mock (DataContext.tsx)

🚧 Funcionalidades em Desenvolvimento

Backend

Frontend

📝 Scripts Disponíveis

Frontend

Backend

🤝 Contribuindo

Branch Strategy

Como Contribuir

📄 Licença

📞 Suporte e Contato

Repositório e Issues

Contato Comercial

Redes Sociais

🎯 Roadmap Futuro

Curto Prazo (Q1 2025)

Médio Prazo (Q2-Q3 2025)

Longo Prazo (Q4 2025 e além)

🏆 Diferenciais do Projeto

17 KiB

Raw Blame History

1. Superadmin (`SUPERADMIN`)

2. Dono da Empresa (`BUSINESS_OWNER`)

3. Fotógrafo (`PHOTOGRAPHER`)

4. Cliente (`EVENT_OWNER`)