# Frontend - Photum Formaturas

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

## 📋 Índice

- [Tecnologias](#tecnologias)
- [Estrutura do Projeto](#estrutura-do-projeto)
- [Instalação](#instalação)
- [Scripts Disponíveis](#scripts-disponíveis)
- [Arquitetura](#arquitetura)
- [Componentes](#componentes)
- [Páginas](#páginas)
- [Contextos](#contextos)
- [Serviços](#serviços)
- [Tipos](#tipos)
- [Configuração](#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

```bash
# 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

```bash
# 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

```typescript
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

```typescript
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

```typescript
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

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

```env
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