Nexapromo

Prompt

-

Model description

Crie uma aplicação web completa, em arquivo único estruturado ou arquitetura modular simples indexada, operando 100% Client-Side (sem dependência de servidores ou bancos de dados externos pagos). Toda a persistência de dados (cadastro de usuários, missões aceitas, fotos e relatórios) deve ser salva de forma robusta no localStorage do próprio navegador, permitindo que o usuário feche, abra e use o aplicativo repetidamente sem perder os dados.

O idioma principal da interface deve ser Português (PT-BR), utilizando um design mobile-first responsivo moderno baseado em Tailwind CSS e ícones do Lucide React.

COMPONENTE 1: APP DO PROMOTOR (Interface Mobile-First)

1. Sistema de Autenticação Local: Tela de login e cadastro simples (Nome, CPF fictício, Telefone). Salvar a sessão no localStorage para login automático no próximo acesso.
2. Feed de Oportunidades:
   • Mapa interativo simulado ou lista de supermercados num raio de 5km.
   • Lista de missões pré-carregadas de grandes marcas (Ex: "Abastecimento de Gôndola Coca-Cola no Carrefour" - R$ 40,00).
3. Roteiro da Missão (Passo a Passo):
   • Ao aceitar, abrir cronômetro regressivo de 2 horas.
   • Etapa 1: Simular Check-in de Geolocalização (validar via clique que o usuário está no endereço correto).
   • Etapa 2: Coleta de Dados (Perguntas simples com checkbox: "Há produtos vencidos?", "O preço está visível?").
   • Etapa 3: Evidência Fotográfica (Componente de câmera simulado com upload de arquivo. Bloquear a conclusão caso o campo de foto esteja vazio).
4. Carteira Virtual: Tela exibindo o saldo acumulado das missões aprovadas e histórico detalhado de saques simulados via Pix.

COMPONENTE 2: PAINEL DA INDÚSTRIA / AUDITORIA (Interface Desktop)

1. Alternador de Perfil: Incluir um menu ou botão flutuante visível ("Mudar para Painel Admin") para alternar instantaneamente entre a visão do Promotor e a visão da Marca.
2. Central de Monitoramento:
   • Métricas de desempenho gerais (Total pago, missões em andamento, taxa de ruptura).
   • Fila de Auditoria: Listagem em tempo real de todas as missões enviadas pelos promotores.
3. Tela de Validação: O administrador deve conseguir ver a foto enviada pelo promotor, as respostas do formulário, e ter dois botões: "Aprovar Missão" (o que adiciona o dinheiro automaticamente na carteira do promotor) ou "Reprovar Missão" (enviando uma justificativa).
4. Gerador de Demandas: Formulário para cadastrar novas missões, escolhendo a marca, o supermercado, o valor da recompensa e a lista de tarefas exigidas.

REQUISITOS TÉCNICOS CRÍTICOS PARA EVITAR ERROS:

• Toda a lógica de mudança de telas deve ser controlada por estados (React useState) de forma limpa, sem depender de rotas complexas que possam quebrar no navegador.
• Inclua uma base de dados mockada (fictícia) rica no código inicial com pelo menos 4 missões e 3 marcas diferentes para que o app já inicie totalmente utilizável.
• Trate qualquer erro de upload de imagem para que arquivos pesados não quebrem o armazenamento do localStorage (se necessário, armazene apenas metadados ou faça compressão simulada da string em Base64).

Download model

Download them in the Files & versions tab.