photum/frontend

Frontend - Photum Formaturas

Sistema de gerenciamento de eventos e formaturas desenvolvido com React, TypeScript e Vite.

📋 Índice

• Tecnologias
• Estrutura do Projeto
• Instalação
• Scripts Disponíveis
• Arquitetura
• Componentes
• Páginas
• Contextos
• Serviços
• Tipos
• Configuração

🚀 Tecnologias

• 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

frontend/
├── components/          # Componentes reutilizáveis
│   ├── 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

# Instalar dependências
npm install

# Configurar variáveis de ambiente
cp .env.example .env.local

# Editar .env.local com suas credenciais
# VITE_MAPBOX_TOKEN=seu_token_aqui
# GEMINI_API_KEY=sua_chave_aqui

📜 Scripts Disponíveis

# Iniciar servidor de desenvolvimento (porta 3000)
npm run dev

# Build para produção
npm run build

# Preview da build de produção
npm run preview

🏗️ Arquitetura

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

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

DataContext

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;
}

🛠️ Serviços

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.

mockGeoService.ts

Serviço mock para testes de geolocalização sem consumir API externa.

📝 Tipos

UserRole (Enum)

• SUPERADMIN: Acesso total ao sistema
• BUSINESS_OWNER: Proprietário do negócio
• EVENT_OWNER: Cliente/dono do evento
• PHOTOGRAPHER: Fotógrafo

EventStatus (Enum)

• PENDING_APPROVAL: Aguardando aprovação
• PLANNING: Em planejamento
• CONFIRMED: Confirmado
• IN_PROGRESS: Em execução
• DELIVERED: Entregue
• ARCHIVED: Arquivado

EventType (Enum)

• WEDDING: Casamento
• CORPORATE: Corporativo
• BIRTHDAY: Aniversário
• DEBUTANTE: Debutante
• OTHER: Outro

Interfaces Principais

interface User {
  id: string;
  name: string;
  email: string;
  role: UserRole;
  avatar?: string;
  institutionId?: string;
}

interface Institution {
  id: string;
  name: string;
  type: string;
  cnpj?: string;
  phone: string;
  email: string;
  address?: Address;
  description?: string;
  ownerId: string;
}

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

vite.config.ts

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

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

• Email: contato@photum.com.br
• Tel: (19) 3405 5024 | (19) 3621 4621

---

Desenvolvido por Photum Formaturas © 2025