myspace / index.html
cortezzcs21's picture
Crie a interface da área de "Gestão de Promoters" de um sistema web chamado "EventOps Pro", voltado para empresas que organizam eventos. Essa tela deve estar integrada a um painel administrativo. Utilize React + TailwindCSS (ou HTML/CSS/JS puro, se for necessário). A estrutura precisa ser funcional, visualmente clara e organizada para desktop. A tela deve conter: 1. **Título da Página:** "Gestão de Promoters" 2. **Botões principais no topo:** - [ + Cadastrar novo Promoter ] - [ Exportar Relatório ] (PDF ou Excel) - [ Gerar Links ou QR Codes ] 3. **Tabela/Listagem de Promoters** - Colunas: - Foto ou ícone do promoter - Nome completo - Telefone ou @Instagram - Link de venda (com botão de copiar) - Número de ingressos vendidos - Valor total em R$ - Comissão em R$ - Status (ativo/inativo) - Ações (editar / desativar / visualizar perfil) 4. **Filtros e busca lateral ou superior:** - Buscar por nome - Filtrar por status (ativo, inativo) - Filtrar por evento específico 5. **Modal de Cadastro de Promoter:** - Campos: - Nome completo - Telefone - Instagram (opcional) - CPF (opcional) - Evento vinculado - Porcentagem de comissão - Gerar link personalizado 6. **Detalhamento individual do promoter (ao clicar):** - Perfil com foto - Dados de contato - Lista de eventos vinculados - Desempenho por evento - Histórico de vendas - Total comissionado - Status de pagamento (pago / pendente) O layout deve ser responsivo, com ícones, tipografia clara e cores neutras com destaques visuais nos botões e status. A navegação deve ser fluida e profissional, com menus laterais se necessário. Pode usar ícones da biblioteca Lucide, Heroicons ou Font Awesome. Apenas o frontend. Pode usar dados fictícios para ilustrar a tabela e os gráficos de desempenho. - Initial Deployment
6c0f14c verified
Raw History Blame Contribute Delete
49.7 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EventOps Pro - Gestão de Promoters</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.sidebar {
transition: all 0.3s ease;
}
.modal {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal.hidden {
opacity: 0;
pointer-events: none;
transform: translateY(-20px);
}
.profile-card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.link-copy:hover .copy-icon {
opacity: 1;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
<div class="p-4 border-b border-indigo-700">
<h1 class="text-xl font-bold flex items-center">
<i class="fas fa-calendar-alt mr-2"></i>
EventOps Pro
</h1>
</div>
<nav class="p-4">
<ul>
<li class="mb-2">
<a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700">
<i class="fas fa-tachometer-alt mr-2"></i> Dashboard
</a>
</li>
<li class="mb-2">
<a href="#" class="block py-2 px-4 rounded bg-indigo-900">
<i class="fas fa-users mr-2"></i> Promoters
</a>
</li>
<li class="mb-2">
<a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700">
<i class="fas fa-ticket-alt mr-2"></i> Eventos
</a>
</li>
<li class="mb-2">
<a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700">
<i class="fas fa-chart-line mr-2"></i> Relatórios
</a>
</li>
<li class="mb-2">
<a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700">
<i class="fas fa-cog mr-2"></i> Configurações
</a>
</li>
</ul>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm p-4 flex justify-between items-center">
<div class="flex items-center">
<button class="md:hidden mr-4 text-gray-600">
<i class="fas fa-bars"></i>
</button>
<h1 class="text-2xl font-bold text-gray-800">Gestão de Promoters</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
<i class="fas fa-user text-indigo-600"></i>
</div>
<span class="hidden md:inline">Admin</span>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="p-6">
<!-- Action Buttons -->
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
<div class="flex space-x-3">
<button onclick="openModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Cadastrar novo Promoter
</button>
<button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-file-export mr-2"></i> Exportar Relatório
</button>
<button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-qrcode mr-2"></i> Gerar Links/QR Codes
</button>
</div>
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-600">Filtrar:</span>
<select class="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Todos os status</option>
<option>Ativo</option>
<option>Inativo</option>
</select>
<select class="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Todos os eventos</option>
<option>Festa Junina 2023</option>
<option>Carnaval 2024</option>
<option>Ano Novo 2024</option>
</select>
</div>
</div>
<!-- Promoters Table -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Promoter</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contato</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Link de Venda</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ingressos</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor Total</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comissão</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- Row 1 -->
<tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('1')">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ana Carolina Silva</div>
<div class="text-sm text-gray-500">CPF: 123.456.789-00</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">(11) 98765-4321</div>
<div class="text-sm text-gray-500">@anacarol</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="link-copy flex items-center">
<span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/ana-carol</span>
<button onclick="event.stopPropagation(); copyLink('eventops.pro/ana-carol')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600">
<i class="fas fa-copy text-sm"></i>
</button>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
87
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 8.700,00
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 870,00
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Ativo
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex space-x-2">
<button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900">
<i class="fas fa-edit"></i>
</button>
<button onclick="event.stopPropagation(); toggleStatus('1')" class="text-yellow-600 hover:text-yellow-900">
<i class="fas fa-ban"></i>
</button>
<button onclick="event.stopPropagation(); openProfile('1')" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-eye"></i>
</button>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('2')">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Carlos Eduardo</div>
<div class="text-sm text-gray-500">CPF: 987.654.321-00</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">(21) 99876-5432</div>
<div class="text-sm text-gray-500">@carlosedu</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="link-copy flex items-center">
<span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/carlos-edu</span>
<button onclick="event.stopPropagation(); copyLink('eventops.pro/carlos-edu')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600">
<i class="fas fa-copy text-sm"></i>
</button>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
124
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 12.400,00
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 1.240,00
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Ativo
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex space-x-2">
<button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900">
<i class="fas fa-edit"></i>
</button>
<button onclick="event.stopPropagation(); toggleStatus('2')" class="text-yellow-600 hover:text-yellow-900">
<i class="fas fa-ban"></i>
</button>
<button onclick="event.stopPropagation(); openProfile('2')" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-eye"></i>
</button>
</div>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('3')">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Juliana Santos</div>
<div class="text-sm text-gray-500">CPF: 456.789.123-00</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">(31) 98765-1234</div>
<div class="text-sm text-gray-500">@julianasantos</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="link-copy flex items-center">
<span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/juliana-santos</span>
<button onclick="event.stopPropagation(); copyLink('eventops.pro/juliana-santos')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600">
<i class="fas fa-copy text-sm"></i>
</button>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
56
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 5.600,00
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 560,00
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
Inativo
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex space-x-2">
<button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900">
<i class="fas fa-edit"></i>
</button>
<button onclick="event.stopPropagation(); toggleStatus('3')" class="text-yellow-600 hover:text-yellow-900">
<i class="fas fa-check-circle"></i>
</button>
<button onclick="event.stopPropagation(); openProfile('3')" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-eye"></i>
</button>
</div>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('4')">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Roberto Almeida</div>
<div class="text-sm text-gray-500">CPF: 789.123.456-00</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">(41) 98765-4321</div>
<div class="text-sm text-gray-500">@roberto.almeida</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="link-copy flex items-center">
<span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/roberto-almeida</span>
<button onclick="event.stopPropagation(); copyLink('eventops.pro/roberto-almeida')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600">
<i class="fas fa-copy text-sm"></i>
</button>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
203
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 20.300,00
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
R$ 2.030,00
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Ativo
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex space-x-2">
<button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900">
<i class="fas fa-edit"></i>
</button>
<button onclick="event.stopPropagation(); toggleStatus('4')" class="text-yellow-600 hover:text-yellow-900">
<i class="fas fa-ban"></i>
</button>
<button onclick="event.stopPropagation(); openProfile('4')" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-eye"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Anterior
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Próximo
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
Mostrando
<span class="font-medium">1</span>
a
<span class="font-medium">4</span>
de
<span class="font-medium">12</span>
resultados
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Anterior</span>
<i class="fas fa-chevron-left"></i>
</a>
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
2
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
3
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Próximo</span>
<i class="fas fa-chevron-right"></i>
</a>
</nav>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Modal de Cadastro -->
<div id="modal" class="modal fixed inset-0 z-50 hidden">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title">
Cadastrar Novo Promoter
</h3>
<div class="mt-2 space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Nome Completo</label>
<input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700">Telefone</label>
<input type="text" id="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="instagram" class="block text-sm font-medium text-gray-700">Instagram (opcional)</label>
<input type="text" id="instagram" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="cpf" class="block text-sm font-medium text-gray-700">CPF (opcional)</label>
<input type="text" id="cpf" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="event" class="block text-sm font-medium text-gray-700">Evento Vinculado</label>
<select id="event" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Selecione um evento</option>
<option>Festa Junina 2023</option>
<option>Carnaval 2024</option>
<option>Ano Novo 2024</option>
</select>
</div>
<div>
<label for="commission" class="block text-sm font-medium text-gray-700">Porcentagem de Comissão</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input type="text" id="commission" class="block w-full pr-12 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="10">
<div class="absolute inset-y-0 right-0 flex items-center">
<span class="h-full py-0 pl-2 pr-3 border-transparent bg-transparent text-gray-500 sm:text-sm">%</span>
</div>
</div>
</div>
<div class="flex items-center">
<input id="generate-link" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="generate-link" class="ml-2 block text-sm text-gray-700">Gerar link personalizado</label>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
Salvar
</button>
<button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancelar
</button>
</div>
</div>
</div>
</div>
<!-- Profile Modal -->
<div id="profile-modal" class="modal fixed inset-0 z-50 hidden">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<div class="flex justify-between items-start">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
Perfil do Promoter
</h3>
<button onclick="closeProfile()" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Left Column - Profile Info -->
<div class="col-span-1">
<div class="profile-card bg-white p-4 rounded-lg border border-gray-200">
<div class="flex flex-col items-center">
<img class="h-24 w-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<h4 class="text-lg font-semibold">Ana Carolina Silva</h4>
<p class="text-sm text-gray-500">Promoter desde: 15/03/2023</p>
<div class="mt-4 w-full space-y-3">
<div class="flex items-center">
<i class="fas fa-phone-alt text-gray-400 mr-2"></i>
<span class="text-sm">(11) 98765-4321</span>
</div>
<div class="flex items-center">
<i class="fab fa-instagram text-gray-400 mr-2"></i>
<span class="text-sm">@anacarol</span>
</div>
<div class="flex items-center">
<i class="fas fa-id-card text-gray-400 mr-2"></i>
<span class="text-sm">123.456.789-00</span>
</div>
<div class="flex items-center">
<i class="fas fa-link text-gray-400 mr-2"></i>
<div class="flex items-center">
<span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/ana-carol</span>
<button onclick="copyLink('eventops.pro/ana-carol')" class="ml-1 text-gray-400 hover:text-indigo-600">
<i class="fas fa-copy text-sm"></i>
</button>
</div>
</div>
</div>
<div class="mt-4 w-full">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Ativo
</span>
</div>
</div>
</div>
</div>
<!-- Middle Column - Performance -->
<div class="col-span-1">
<div class="profile-card bg-white p-4 rounded-lg border border-gray-200">
<h4 class="text-md font-semibold mb-4">Desempenho</h4>
<div class="space-y-4">
<div>
<p class="text-sm text-gray-500">Total de ingressos vendidos</p>
<p class="text-xl font-bold">87</p>
</div>
<div>
<p class="text-sm text-gray-500">Valor total gerado</p>
<p class="text-xl font-bold">R$ 8.700,00</p>
</div>
<div>
<p class="text-sm text-gray-500">Comissão total</p>
<p class="text-xl font-bold">R$ 870,00</p>
</div>
<div>
<p class="text-sm text-gray-500">Status de pagamento</p>
<div class="flex items-center">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
Pendente
</span>
<button class="ml-2 text-xs text-indigo-600 hover:text-indigo-800">
Marcar como pago
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column - Events -->
<div class="col-span-1">
<div class="profile-card bg-white p-4 rounded-lg border border-gray-200">
<h4 class="text-md font-semibold mb-4">Eventos Vinculados</h4>
<div class="space-y-3">
<div class="border-b pb-2">
<p class="font-medium">Festa Junina 2023</p>
<div class="flex justify-between text-sm text-gray-500">
<span>Ingressos: 45</span>
<span>R$ 450,00</span>
</div>
</div>
<div class="border-b pb-2">
<p class="font-medium">Carnaval 2024</p>
<div class="flex justify-between text-sm text-gray-500">
<span>Ingressos: 32</span>
<span>R$ 320,00</span>
</div>
</div>
<div class="border-b pb-2">
<p class="font-medium">Ano Novo 2024</p>
<div class="flex justify-between text-sm text-gray-500">
<span>Ingressos: 10</span>
<span>R$ 100,00</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sales History -->
<div class="mt-6">
<h4 class="text-md font-semibold mb-4">Histórico de Vendas</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Evento</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ingressos</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comissão</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Festa Junina 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 500,00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 50,00</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Festa Junina 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 1.000,00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 100,00</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Festa Junina 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 3.000,00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 300,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" onclick="closeProfile()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
Fechar
</button>
</div>
</div>
</div>
</div>
<script>
// Modal functions
function openModal() {
document.getElementById('modal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('modal').classList.add('hidden');
}
// Profile modal functions
function openProfile(id) {
document.getElementById('profile-modal').classList.remove('hidden');
}
function closeProfile() {
document.getElementById('profile-modal').classList.add('hidden');
}
// Toggle status
function toggleStatus(id) {
alert('Status do promoter ID ' + id + ' alterado');
}
// Copy link function
function copyLink(link) {
navigator.clipboard.writeText(link);
alert('Link copiado: ' + link);
}
// Close modals when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('modal');
const profileModal = document.getElementById('profile-modal');
if (event.target === modal) {
closeModal();
}
if (event.target === profileModal) {
closeProfile();
}
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cortezzcs21/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>