356 lines
9.5 KiB
Markdown
356 lines
9.5 KiB
Markdown
# 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
|