Sua experiência na palma da mão
import React, { useState, useEffect } from ‘react’;
import { Search, MapPin, Calendar, Clock, ChevronLeft, ChevronRight, Ticket, User, QrCode, LogOut, BarChart2, Loader2 } from ‘lucide-react’;
//———– SIMULAÇÃO DE DADOS INICIAIS (Seria carregado do Firestore) ———–//
const initialEvents = [
{
id: 1,
title: ‘Summit de Inovação em IA’,
city: ‘São Paulo, SP’,
date: ’15 de Outubro, 2025′,
time: ’09:00 – 18:00′,
category: ‘Tecnologia’,
image: ‘https://placehold.co/600×400/004aad/ffffff?text=Summit+IA’,
description: ‘O maior evento sobre Inteligência Artificial da América Latina. Palestras com especialistas renomados, workshops práticos e networking de alto nível. Junte-se a nós para explorar o futuro da IA.’,
tickets: [
{ id: ‘t1_1’, type: ‘Pista’, price: 199.90, available: 500 },
{ id: ‘t1_2’, type: ‘VIP’, price: 499.90, available: 100 },
{ id: ‘t1_3’, type: ‘Acesso Total + Mentoria’, price: 999.90, available: 20 },
],
location: ‘Expo Center Norte, São Paulo, SP’
},
{
id: 2,
title: ‘Festival de Jazz & Blues’,
city: ‘Rio de Janeiro, RJ’,
date: ’22 de Novembro, 2025′,
time: ’19:00 – 02:00′,
category: ‘Música’,
image: ‘https://placehold.co/600×400/010101/ffffff?text=Jazz+%26+Blues’,
description: ‘Uma noite inesquecível com os melhores artistas de Jazz e Blues do cenário nacional e internacional. Ambiente sofisticado, gastronomia de primeira e música de alta qualidade.’,
tickets: [
{ id: ‘t2_1’, type: ‘Pista’, price: 150.00, available: 1000 },
{ id: ‘t2_2’, type: ‘Mesa (4 pessoas)’, price: 800.00, available: 50 },
],
location: ‘Marina da Glória, Rio de Janeiro, RJ’
},
{
id: 3,
title: ‘Startup Conference 2025’,
city: ‘Belo Horizonte, MG’,
date: ’05 de Dezembro, 2025′,
time: ’08:00 – 20:00′,
category: ‘Negócios’,
image: ‘https://placehold.co/600×400/333333/ffffff?text=Startup+Conf’,
description: ‘Conecte-se com os maiores nomes do ecossistema de startups. Rodadas de investimento, pitches, painéis sobre growth hacking e muito mais.’,
tickets: [
{ id: ‘t3_1’, type: ‘Estudante’, price: 99.00, available: 300 },
{ id: ‘t3_2’, type: ‘Profissional’, price: 249.00, available: 700 },
{ id: ‘t3_3’, type: ‘Investidor’, price: 799.00, available: 150 },
],
location: ‘Expominas, Belo Horizonte, MG’
},
{
id: 4,
title: ‘Show Beneficente Hospital do Amor’,
city: ‘Barretos, SP’,
date: ’28 de Fevereiro, 2026′,
time: ’20:00 – 23:00′,
category: ‘Beneficente’,
image: ‘https://placehold.co/600×400/004aad/ffffff?text=Show+Beneficente’,
description: ‘Participe de um show emocionante com grandes artistas e ajude o Hospital do Amor de Barretos. Toda a renda será revertida para o tratamento de pacientes. Sua presença faz a diferença.’,
tickets: [
{ id: ‘t4_1’, type: ‘Pista Solidária’, price: 80.00, available: 5000 },
{ id: ‘t4_2’, type: ‘Camarote Open Bar’, price: 250.00, available: 500 },
],
location: ‘Parque do Peão, Barretos, SP’
},
];
//———– ESTRUTURA PARA CONEXÃO COM FIREBASE (BAAS) ———–//
// Cole suas credenciais do Firebase aqui.
const firebaseConfig = {
apiKey: “SUA_API_KEY”,
authDomain: “SEU_AUTH_DOMAIN”,
projectId: “SEU_PROJECT_ID”,
storageBucket: “SEU_STORAGE_BUCKET”,
messagingSenderId: “SEU_MESSAGING_SENDER_ID”,
appId: “SEU_APP_ID”
};
// Em uma aplicação real, inicializaríamos o Firebase aqui.
// import { initializeApp } from “firebase/app”;
// import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut } from “firebase/auth”;
// import { getFirestore, collection, getDocs, doc, setDoc, query, where } from “firebase/firestore”;
// const app = initializeApp(firebaseConfig);
// const auth = getAuth(app);
// const db = getFirestore(app);
//———– COMPONENTES DA UI (Telas do Aplicativo) ———–//
const AppButton = ({ children, onClick, className = ”, variant = ‘primary’, disabled = false }) => {
const baseStyle = ‘w-full text-white font-bold py-3 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 focus:outline-none flex items-center justify-center’;
const variantStyle = variant === ‘primary’ ? ‘bg-blue-600 hover:bg-blue-700’ : ‘bg-gray-700 hover:bg-gray-800’;
const disabledStyle = ‘opacity-50 cursor-not-allowed’;
return (
{disabled &&
);
};
const LoginScreen = ({ setPage, setUser }) => {
const [email, setEmail] = useState(”);
const [password, setPassword] = useState(”);
const [isRegistering, setIsRegistering] = useState(false);
const [loading, setLoading] = useState(false);
const handleAuth = async () => {
setLoading(true);
// SIMULAÇÃO: Em uma app real, aqui chamaria as funções do Firebase Auth
// if (isRegistering) {
// await createUserWithEmailAndPassword(auth, email, password);
// } else {
// await signInWithEmailAndPassword(auth, email, password);
// }
// O onAuthStateChanged listener cuidaria de atualizar o estado do usuário
console.log(`${isRegistering ? ‘Registrando’ : ‘Logando’} com:`, email, password);
setTimeout(() => { // Simula a resposta da API
setUser({ name: ‘Ana Silva’, email: email });
setPage(‘home’);
setLoading(false);
}, 1500);
};
return (
INVISTA {Array.from({ length: 25 }).map((_, i) => (
techtickets
{isRegistering ? ‘Cadastrar’ : ‘Entrar’}
{isRegistering ? ‘Já tem uma conta?’ : ‘Não tem uma conta?’} setIsRegistering(!isRegistering)} className=”font-bold text-blue-400 hover:underline”>{isRegistering ? ‘Faça login’ : ‘Cadastre-se’}
);
};
const HomeScreen = ({ setPage, setSelectedEvent, user, events }) => {
return (
Próximos Eventos
{events.map(event => (
{ setSelectedEvent(event); setPage(‘eventDetail’); }}>
{event.title}
{event.city}
{event.date}
))}
);
};
const EventDetailScreen = ({ event, setPage, setOrderDetails }) => {
const [ticketCounts, setTicketCounts] = useState({});
const handleTicketCountChange = (ticketId, delta) => {
setTicketCounts(prev => ({ …prev, [ticketId]: Math.max(0, (prev[ticketId] || 0) + delta) }));
};
const totalOrder = event.tickets.reduce((total, ticket) => {
const count = ticketCounts[ticket.id] || 0;
return total + (count * ticket.price);
}, 0);
const totalItems = Object.values(ticketCounts).reduce((sum, count) => sum + count, 0);
const handleCheckout = () => {
const orderItems = event.tickets.filter(t => ticketCounts[t.id] > 0).map(t => ({…t, quantity: ticketCounts[t.id]}));
setOrderDetails({
event,
items: orderItems,
total: totalOrder,
});
setPage(‘checkout’);
};
return (
setPage(‘home’)} className=”absolute top-4 left-4 bg-black bg-opacity-50 p-2 rounded-full text-white”>
{event.title}
{event.category}
{event.date} às {event.time}
{event.location}
{event.description}
Ingressos
{event.tickets.map(ticket => (
{ticket.type}
R$ {ticket.price.toFixed(2)}
handleTicketCountChange(ticket.id, -1)} className=”px-2 text-xl”>-
{ticketCounts[ticket.id] || 0}
handleTicketCountChange(ticket.id, 1)} className=”px-2 text-xl”>+
))}
{totalItems > 0 && (
Total R$ {totalOrder.toFixed(2).replace(‘.’, ‘,’)}
Comprar Ingressos
)}
);
};
const CheckoutScreen = ({ setPage, orderDetails, user, addTicket }) => {
const [loading, setLoading] = useState(false);
const [paymentSuccess, setPaymentSuccess] = useState(false);
const [agreedToLGPD, setAgreedToLGPD] = useState(false);
const handlePayment = async () => {
setLoading(true);
// LÓGICA DE PAGAMENTO:
// 1. Chamar uma Cloud Function para criar uma preferência de pagamento no Mercado Pago.
// 2. Redirecionar o usuário para o checkout do Mercado Pago.
// 3. Após o pagamento, o Mercado Pago notificará um webhook (outra Cloud Function).
// 4. Essa função de webhook confirmará o pagamento e chamará a função createTicket.
// — SIMULAÇÃO DO FLUXO —
console.log(“Iniciando pagamento para:”, orderDetails);
await new Promise(resolve => setTimeout(resolve, 2500)); // Simula a comunicação com Mercado Pago
// Supondo que o pagamento foi bem-sucedido:
for (const item of orderDetails.items) {
for (let i = 0; i < item.quantity; i++) {
// Em um app real, essa função seria chamada pela Cloud Function segura
const newTicket = {
id: `ticket_${new Date().getTime()}_${i}`,
eventId: orderDetails.event.id,
purchaseDate: new Date().toLocaleDateString('pt-BR'),
qrCodeValue: `IVT-${orderDetails.event.id}-${user.email}-${new Date().getTime()}-${i}`,
ticketType: item.type,
status: 'valid' // Status inicial do ingresso
};
addTicket(newTicket);
}
}
setLoading(false);
setPaymentSuccess(true);
await new Promise(resolve => setTimeout(resolve, 2000)); // Espera para mostrar a mensagem de sucesso
setPage(‘myTickets’);
};
if (loading || paymentSuccess) {
return (
{paymentSuccess ? ‘Pagamento Aprovado!’ : ‘Processando Pagamento…’}
{paymentSuccess ? ‘Seu ingresso foi gerado com sucesso!’ : ‘Aguarde, estamos te redirecionando para o Mercado Pago.’}
);
}
return (
setPage(‘eventDetail’)} className=”absolute left-0 p-1″> Pagamento
Resumo do Pedido
{orderDetails.event.title}
{orderDetails.items.map(item => (
{item.quantity}x {item.type}
R$ {(item.quantity * item.price).toFixed(2)}
))}
Total
R$ {orderDetails.total.toFixed(2)}
Eu concordo com os Termos de Serviço e com a Política de Privacidade, aderindo à Lei Geral de Proteção de Dados (LGPD).
Pagar com Mercado Pago
)
};
// — COMPONENTE DE QR CODE EMBUTIDO (SEM DEPENDÊNCIAS EXTERNAS) —
// Usa a biblioteca qrcodegen (incluída no final do arquivo)
const QRCode = ({ value, size = 256, fgColor = “#010101” }) => {
// Nível de correção de erro: ALTO (equivale ao ‘H’)
const qr = qrcodegen.QrCode.encodeText(value, qrcodegen.QrCode.Ecc.HIGH);
// Gera o caminho SVG com uma borda de 4 módulos (padrão)
const path = qr.toSvgString(4);
const qrSize = qr.size + 8; // Tamanho total com borda
const viewBox = `0 0 ${qrSize} ${qrSize}`;
return (
);
};
const MyTicketsScreen = ({ setPage, setSelectedTicket, tickets, events }) => {
return (
setPage(‘home’)} className=”absolute left-0 p-1″> Meus Ingressos
{tickets.length > 0 ? (
{tickets.map(ticket => {
const event = events.find(e => e.id === ticket.eventId);
return (
{ setSelectedTicket({ …ticket, event }); setPage(‘qrCode’); }}>
{event.title}
{event.city}
{ticket.ticketType}
);
})}
) : (
Você ainda não tem ingressos
Explore os eventos e comece a comprar!
)}
);
};
const QRCodeScreen = ({ setPage, ticket, user }) => {
const { event } = ticket;
/*
* LÓGICA DE VALIDAÇÃO (PORTARIA):
* 1. O app da portaria abre um leitor de QR Code.
* 2. Ao escanear, ele lê o valor `ticket.qrCodeValue`.
* 3. O app da portaria faz uma consulta no Firestore: `getDoc(doc(db, “tickets”, ticket.qrCodeValue))`.
* 4. A consulta verifica o campo `status` do ingresso:
* – Se `status` for “valid”, a tela fica VERDE (APROVADO). O app então atualiza o status para “used”.
* – Se `status` for “used” ou não existir, a tela fica VERMELHA (INVÁLIDO/JÁ UTILIZADO).
* Essa lógica garante que cada ingresso só possa ser usado uma vez.
*/
return (
setPage(‘myTickets’)} className=”absolute left-0 p-1″> Seu Ingresso
{event.title} {event.date} – {event.time}
{event.location}
Apresente este QR Code na entrada do evento
{user.name}
{ticket.ticketType}
{ticket.qrCodeValue}
);
}
const ProfileScreen = ({ setPage, user, setUser }) => {
const handleLogout = () => {
// await signOut(auth); // Função real do Firebase
setUser(null);
setPage(‘login’);
};
return (
setPage(‘home’)} className=”absolute left-0 p-1″> Meu Perfil
{user.name.charAt(0)}
{user.name}
{user.email}
Editar Perfil alert(‘Função para Criar Evento e Ver Relatórios’)}>Área do Organizador
Sair
);
};
export default function App() {
const [page, setPage] = useState(‘login’);
const [user, setUser] = useState(null); // Gerencia o estado de autenticação
const [events, setEvents] = useState([]);
const [tickets, setTickets] = useState([]);
const [selectedEvent, setSelectedEvent] = useState(null);
const [selectedTicket, setSelectedTicket] = useState(null);
const [orderDetails, setOrderDetails] = useState(null);
// Efeito para carregar dados iniciais (simula fetch do Firestore)
useEffect(() => {
setEvents(initialEvents);
}, []);
const addTicket = (newTicket) => {
setTickets(prevTickets => […prevTickets, newTicket]);
};
const renderPage = () => {
if (!user) {
return
;
}
switch (page) {
case ‘home’: return
;
case ‘eventDetail’: return
;
case ‘checkout’: return
