Spaces:

Germinal
/

anycoder-8a0064cd

Build error

App Files Files Community

Germinal commited on Dec 12, 2025

Commit

484977e

verified ·

1 Parent(s): cb69733

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +329 -639

index.html CHANGED Viewed

@@ -3,710 +3,400 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>S.I.E. PRO - Forensic Analytics</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <style>
     body {
       font-family: 'Inter', sans-serif;
     }
-    .gradient-bg {
-      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
-    }
-    .card-hover:hover {
-      transform: translateY(-2px);
-      transition: transform 0.2s ease-in-out;
-    }
     .loading-spinner {
-      border: 3px solid #f3f3f3;
-      border-top: 3px solid #3b82f6;
       border-radius: 50%;
-      width: 20px;
-      height: 20px;
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
   </style>
 </head>
-<body class="bg-slate-900 text-slate-200 min-h-screen">
-  <div id="app" class="max-w-7xl mx-auto p-4">
-    <!-- Header -->
-    <div class="gradient-bg rounded-lg p-6 mb-6 shadow-lg">
-      <div class="flex justify-between items-center">
-        <div class="flex items-center space-x-3">
-          <div class="bg-white p-2 rounded-lg">
-            <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
-              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-xl font-bold text-white">S.I.E. PRO Forensic Analytics</h1>
-            <p class="text-sm text-blue-100">Análise Inteligente de Agentes Públicos</p>
           </div>
         </div>
-        <div class="text-right">
-          <div id="status" class="text-xs text-blue-200 mb-1">Aguardando Autenticação...</div>
-          <div id="auth-status" class="text-xs text-blue-200">Desconectado</div>
-        </div>
-      </div>
-    </div>
-    <!-- Main Content -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      <!-- Search Panel -->
-      <div class="lg:col-span-1 space-y-6">
-        <div class="bg-slate-800 rounded-lg p-6 shadow-lg">
-          <h2 class="text-lg font-semibold mb-4 text-blue-300">Pesquisa Forense</h2>
-          <form id="searchForm" class="space-y-4">
-            <div>
-              <label class="block text-sm font-medium mb-1 text-slate-300">Tipo de Localização</label>
-              <select id="locationType" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <option value="municipio">Município</option>
-                <option value="cidade">Cidade</option>
-                <option value="estado">Estado</option>
-              </select>
-            </div>
-            <div>
-              <label class="block text-sm font-medium mb-1 text-slate-300">Nome da Localização</label>
-              <div class="relative">
-                <input type="text" id="query" placeholder="Digite o nome..." class="w-full px-4 py-2 pl-10 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500" required>
-                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <div class="grid grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm font-medium mb-1 text-slate-300">Data Inicial</label>
-                <input type="date" id="startDate" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-              </div>
-              <div>
-                <label class="block text-sm font-medium mb-1 text-slate-300">Data Final</label>
-                <input type="date" id="endDate" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-              </div>
-            </div>
-            <button type="submit" id="btnSearch" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed">
-              <span id="btnText">Pesquisar Agentes</span>
-              <span id="btnSpinner" class="hidden ml-2 loading-spinner"></span>
-            </button>
-          </form>
-        </div>
-        <!-- Advanced Filters -->
-        <div class="bg-slate-800 rounded-lg p-6 shadow-lg">
-          <h2 class="text-lg font-semibold mb-4 text-blue-300">Filtros Avançados</h2>
-          <div class="space-y-4">
             <div>
-              <label class="block text-sm font-medium mb-1 text-slate-300">Status</label>
-              <select id="statusFilter" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white">
-                <option value="all">Todos</option>
-                <option value="ativo">Ativos</option>
-                <option value="inativo">Inativos</option>
-              </select>
             </div>
             <div>
-              <label class="block text-sm font-medium mb-1 text-slate-300">Nível de Risco</label>
-              <select id="riskFilter" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white">
-                <option value="all">Todos</option>
-                <option value="low">Baixo (0-33)</option>
-                <option value="medium">Médio (34-66)</option>
-                <option value="high">Alto (67-100)</option>
               </select>
             </div>
-            <button id="btnApplyFilters" class="w-full bg-slate-600 hover:bg-slate-700 text-white font-medium py-2 px-4 rounded-md transition duration-200">
-              Aplicar Filtros
-            </button>
           </div>
-        </div>
-      </div>
-      <!-- Results Panel -->
-      <div class="lg:col-span-2 space-y-6">
-        <!-- Stats Cards -->
-        <div id="statsContainer" class="grid grid-cols-1 md:grid-cols-3 gap-4 hidden">
-          <div class="bg-slate-800 rounded-lg p-4 shadow-lg card-hover">
-            <div class="flex items-center justify-between">
               <div>
-                <p class="text-sm text-slate-400">Total de Agentes</p>
-                <p id="totalAgents" class="text-2xl font-bold text-white">0</p>
               </div>
-              <div class="bg-blue-600 p-2 rounded-full">
-                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
-                </svg>
               </div>
             </div>
           </div>
-          <div class="bg-slate-800 rounded-lg p-4 shadow-lg card-hover">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm text-slate-400">Agentes Ativos</p>
-                <p id="activeAgents" class="text-2xl font-bold text-green-400">0</p>
-              </div>
-              <div class="bg-green-600 p-2 rounded-full">
-                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                 </svg>
               </div>
             </div>
-          </div>
-          <div class="bg-slate-800 rounded-lg p-4 shadow-lg card-hover">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm text-slate-400">Risco Médio</p>
-                <p id="avgRisk" class="text-2xl font-bold text-yellow-400">0%</p>
-              </div>
-              <div class="bg-yellow-600 p-2 rounded-full">
-                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                 </svg>
               </div>
             </div>
-          </div>
-        </div>
-        <!-- Results List -->
-        <div class="bg-slate-800 rounded-lg p-6 shadow-lg">
-          <div class="flex justify-between items-center mb-4">
-            <h2 class="text-lg font-semibold text-blue-300">Resultados da Análise</h2>
-            <div class="flex space-x-2">
-              <button id="btnExport" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-sm rounded-md transition duration-200 disabled:opacity-50">
-                Exportar
-              </button>
-              <button id="btnDashboard" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-sm rounded-md transition duration-200">
-                Ver Dashboard
-              </button>
             </div>
           </div>
-          <div id="resultsContainer" class="space-y-4">
-            <!-- Results will be inserted here -->
-          </div>
-          <div id="loadingResults" class="text-center py-8 hidden">
-            <div class="mx-auto w-12 h-12 loading-spinner mb-4"></div>
-            <p class="text-slate-400">Processando análise com IA...</p>
-          </div>
-          <div id="noResults" class="text-center py-8 hidden">
-            <svg class="mx-auto w-12 h-12 text-slate-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-            </svg>
-            <p class="text-slate-400">Nenhum resultado encontrado</p>
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Dashboard Modal -->
-  <div id="dashboardModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden overflow-y-auto">
-    <div class="flex items-center justify-center min-h-screen p-4">
-      <div class="bg-slate-800 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden">
-        <div class="bg-slate-900 p-4 flex justify-between items-center border-b border-slate-700">
-          <h2 class="text-lg font-semibold text-white">Dashboard Analítico</h2>
-          <button id="closeDashboard" class="text-slate-400 hover:text-white">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-            </svg>
-          </button>
-        </div>
-        <div class="p-6 overflow-y-auto max-h-[70vh]">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="bg-slate-700 rounded-lg p-4">
-              <h3 class="text-sm font-medium mb-2 text-blue-300">Distribuição por Status</h3>
-              <canvas id="statusChart"></canvas>
-            </div>
-            <div class="bg-slate-700 rounded-lg p-4">
-              <h3 class="text-sm font-medium mb-2 text-blue-300">Nível de Risco</h3>
-              <canvas id="riskChart"></canvas>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    // Plugin Configuration
-    const PLUGIN_ID = "sie-pro-forensic-analytics";
-    let authToken = null;
-    let currentResults = [];
-    // DOM Elements
-    const statusElement = document.getElementById('status');
-    const authStatusElement = document.getElementById('auth-status');
-    const btnSearch = document.getElementById('btnSearch');
-    const btnText = document.getElementById('btnText');
-    const btnSpinner = document.getElementById('btnSpinner');
-    const searchForm = document.getElementById('searchForm');
-    const resultsContainer = document.getElementById('resultsContainer');
-    const loadingResults = document.getElementById('loadingResults');
-    const noResults = document.getElementById('noResults');
-    const statsContainer = document.getElementById('statsContainer');
-    const btnDashboard = document.getElementById('btnDashboard');
-    const btnExport = document.getElementById('btnExport');
-    const btnApplyFilters = document.getElementById('btnApplyFilters');
-    const dashboardModal = document.getElementById('dashboardModal');
-    const closeDashboard = document.getElementById('closeDashboard');
-    // Authentication Handshake
-    window.addEventListener('message', (event) => {
-      if (event.data.type === 'AUTH_TOKEN') {
-        authToken = event.data.token;
-        statusElement.textContent = 'Autenticado';
-        authStatusElement.textContent = 'Conectado ao S.I.E. PRO';
-        authStatusElement.className = 'text-xs text-green-400';
-        btnSearch.disabled = false;
-        console.log('Plugin authenticated successfully');
-      }
-    });
-    // Initialize the plugin
-    function init() {
-      // Set up event listeners
-      searchForm.addEventListener('submit', handleSearch);
-      btnDashboard.addEventListener('click', showDashboard);
-      closeDashboard.addEventListener('click', hideDashboard);
-      btnApplyFilters.addEventListener('click', applyFilters);
-      btnExport.addEventListener('click', exportData);
-      // Check if we're in an iframe
-      if (window.self !== window.top) {
-        // Send ready message to parent
-        window.parent.postMessage({ type: 'PLUGIN_READY', pluginId: PLUGIN_ID }, '*');
-      }
-      // Disable buttons initially
-      btnSearch.disabled = true;
-      btnDashboard.disabled = true;
-      btnExport.disabled = true;
-    }
-    // Handle search form submission
-    async function handleSearch(e) {
-      e.preventDefault();
-      if (!authToken) {
-        alert('Plugin não autenticado. Por favor, aguarde a autenticação.');
-        return;
-      }
-      // Show loading state
-      btnText.textContent = 'Processando...';
-      btnSpinner.classList.remove('hidden');
-      btnSearch.disabled = true;
-      loadingResults.classList.remove('hidden');
-      resultsContainer.innerHTML = '';
-      noResults.classList.add('hidden');
-      statsContainer.classList.add('hidden');
-      // Get form data
-      const formData = new FormData(searchForm);
-      const queryData = {
-        locationType: formData.get('locationType'),
-        query: formData.get('query'),
-        startDate: formData.get('startDate') || null,
-        endDate: formData.get('endDate') || null
-      };
-      try {
-        // Call the AI Gateway
-        const results = await callAIGateway(queryData);
-        currentResults = results;
-        // Display results
-        displayResults(results);
-        updateStats(results);
-        // Enable dashboard button if we have results
-        btnDashboard.disabled = results.length === 0;
-        btnExport.disabled = results.length === 0;
-      } catch (error) {
-        console.error('Error in search:', error);
-        showError('Ocorreu um erro ao processar a pesquisa. Por favor, tente novamente.');
-      } finally {
-        // Reset button state
-        btnText.textContent = 'Pesquisar Agentes';
-        btnSpinner.classList.add('hidden');
-        btnSearch.disabled = false;
-        loadingResults.classList.add('hidden');
-      }
-    }
-    // Call the AI Gateway
-    async function callAIGateway(queryData) {
-      const prompt = buildAIPrompt(queryData);
-      try {
-        const response = await axios.post('/api/client/plugin/ai', {
-          plugin_id: PLUGIN_ID,
-          user_prompt: prompt
-        }, {
-          headers: {
-            'Authorization': `Bearer ${authToken}`,
-            'Content-Type': 'application/json'
           }
         });
-        // Parse the AI response
-        return parseAIResponse(response.data, queryData.query, queryData.locationType);
-      } catch (error) {
-        console.error('AI Gateway Error:', error);
-        throw new Error('Falha na comunicação com o gateway de IA');
-      }
-    }
-    // Build the AI prompt
-    function buildAIPrompt(queryData) {
-      return `
-        Analise os seguintes agentes públicos para possíveis irregularidades ou pontos de atenção:
-        Localização: ${queryData.query} (${queryData.locationType})
-        Período: ${queryData.startDate ? `${queryData.startDate} a ${queryData.endDate}` : 'Não especificado'}
-        Por favor, forneça uma análise detalhada para cada agente público encontrado nesta localização, incluindo:
-        1. Nome completo
-        2. Cargo atual
-        3. Status (ativo/inativo)
-        4. Análise forense breve (máx 150 palavras)
-        5. 2-3 recomendações para investigação adicional
-        6. Score de risco (0-100)
-        Formate a resposta como JSON com a seguinte estrutura:
-        [
-          {
-            "name": "Nome do Agente",
-            "position": "Cargo",
-            "status": "ativo/inativo",
-            "analysis": "Análise detalhada...",
-            "recommendations": ["Recomendação 1", "Recomendação 2"],
-            "riskScore": 45
-          }
-        ]
-        Se não encontrar agentes públicos, retorne um array vazio: []
-      `;
-    }
-    // Parse the AI response
-    function parseAIResponse(aiResponse, location, locationType) {
-      try {
-        // Try to parse as JSON first
-        const parsed = typeof aiResponse === 'string' ? JSON.parse(aiResponse) : aiResponse;
-        if (Array.isArray(parsed)) {
-          return parsed.map(agent => ({
-            ...agent,
-            location: `${location} - ${locationType === 'estado' ? 'Estado' : 'Município'}`
-          }));
-        }
-        // If not JSON, try to extract information from text
-        return extractFromText(aiResponse, location, locationType);
-      } catch (e) {
-        console.warn('Could not parse AI response as JSON, attempting text extraction');
-        return extractFromText(aiResponse, location, locationType);
-      }
-    }
-    // Fallback text extraction
-    function extractFromText(text, location, locationType) {
-      // This is a simplified extraction - in a real scenario, you'd want more robust parsing
-      const agents = [];
-      // Look for patterns in the text
-      const nameMatches = text.match(/Nome: (.+)/g) || [];
-      const positionMatches = text.match(/Cargo: (.+)/g) || [];
-      const statusMatches = text.match(/Status: (ativo|inativo)/g) || [];
-      for (let i = 0; i < nameMatches.length; i++) {
-        agents.push({
-          name: nameMatches[i] ? nameMatches[i].replace('Nome: ', '') : `Agente ${i+1}`,
-          position: positionMatches[i] ? positionMatches[i].replace('Cargo: ', '') : 'Cargo não especificado',
-          status: statusMatches[i] ? statusMatches[i].replace('Status: ', '') : 'ativo',
-          analysis: "Análise não disponível - dados incompletos",
-          recommendations: ["Verificar documentos oficiais", "Revisar histórico de atividades"],
-          riskScore: Math.floor(Math.random() * 100),
-          location: `${location} - ${locationType === 'estado' ? 'Estado' : 'Município'}`
-        });
-      }
-      return agents.length > 0 ? agents : [];
-    }
-    // Display results
-    function displayResults(results) {
-      if (results.length === 0) {
-        noResults.classList.remove('hidden');
-        return;
-      }
-      resultsContainer.innerHTML = results.map((agent, index) => `
-        <div class="bg-slate-700 rounded-lg p-4 shadow-md card-hover">
-          <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-3">
-            <div class="flex items-center space-x-3 mb-3 md:mb-0">
-              <div class="bg-blue-600 text-white rounded-full h-10 w-10 flex items-center justify-center font-bold text-lg">
-                ${agent.name.charAt(0)}
-              </div>
-              <div>
-                <h3 class="font-semibold text-white">${agent.name}</h3>
-                <p class="text-sm text-slate-300">${agent.position}</p>
-              </div>
-            </div>
-            <div class="text-right">
-              <p class="text-sm text-slate-400">${agent.location}</p>
-              <span class="inline-block px-2 py-1 rounded-full text-xs font-medium ${
-                agent.status === 'ativo' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
-              }">
-                ${agent.status}
-              </span>
-            </div>
-          </div>
-          <div class="border-t border-slate-600 pt-3">
-            <div class="mb-3">
-              <h4 class="font-medium text-blue-300 mb-1 flex items-center">
-                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V7a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                </svg>
-                Análise Forense
-              </h4>
-              <p class="text-sm text-slate-300">${agent.analysis || 'Análise não disponível'}</p>
-            </div>
-            <div class="mb-3">
-              <h4 class="font-medium text-blue-300 mb-1 flex items-center">
-                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                </svg>
-                Recomendações
-              </h4>
-              <ul class="list-disc list-inside text-sm text-slate-300 space-y-1">
-                ${agent.recommendations.map(rec => `<li>${rec}</li>`).join('')}
-              </ul>
-            </div>
-            <div>
-              <h4 class="font-medium text-blue-300 mb-1 flex items-center">
-                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                </svg>
-                Nível de Risco
-              </h4>
-              <div class="flex items-center">
-                <div class="w-full bg-slate-600 rounded-full h-2.5">
-                  <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 h-full rounded-full" style="width: ${agent.riskScore}%"></div>
-                </div>
-                <span class="text-sm font-medium text-white ml-2">${agent.riskScore}%</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      `).join('');
-      statsContainer.classList.remove('hidden');
-    }
-    // Update stats
-    function updateStats(results) {
-      document.getElementById('totalAgents').textContent = results.length;
-      document.getElementById('activeAgents').textContent = results.filter(r => r.status === 'ativo').length;
-      const avgRisk = results.reduce((sum, r) => sum + r.riskScore, 0) / results.length;
-      document.getElementById('avgRisk').textContent = `${Math.round(avgRisk)}%`;
-    }
-    // Show dashboard
-    function showDashboard() {
-      if (currentResults.length === 0) return;
-      // Create charts
-      createCharts(currentResults);
-      dashboardModal.classList.remove('hidden');
-    }
-    // Hide dashboard
-    function hideDashboard() {
-      dashboardModal.classList.add('hidden');
-    }
-    // Create charts
-    function createCharts(results) {
-      // Status Chart
-      const statusCounts = results.reduce((acc, agent) => {
-        acc[agent.status] = (acc[agent.status] || 0) + 1;
-        return acc;
-      }, {});
-      new Chart(document.getElementById('statusChart'), {
-        type: 'doughnut',
-        data: {
-          labels: Object.keys(statusCounts),
-          datasets: [{
-            data: Object.values(statusCounts),
-            backgroundColor: ['#10b981', '#ef4444'],
-            borderWidth: 0
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              position: 'bottom',
-              labels: {
-                color: '#94a3b8'
-              }
-            }
-          }
         }
-      });
-      // Risk Chart
-      const riskRanges = {
-        'Baixo (0-33)': results.filter(r => r.riskScore <= 33).length,
-        'Médio (34-66)': results.filter(r => r.riskScore > 33 && r.riskScore <= 66).length,
-        'Alto (67-100)': results.filter(r => r.riskScore > 66).length
-      };
-      new Chart(document.getElementById('riskChart'), {
-        type: 'bar',
-        data: {
-          labels: Object.keys(riskRanges),
-          datasets: [{
-            label: 'Número de Agentes',
-            data: Object.values(riskRanges),
-            backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
-            borderWidth: 0
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              display: false
-            }
-          },
-          scales: {
-            y: {
-              beginAtZero: true,
-              ticks: {
-                color: '#94a3b8'
-              },
-              grid: {
-                color: '#334155'
-              }
             },
-            x: {
-              ticks: {
-                color: '#94a3b8'
-              },
-              grid: {
-                color: '#334155'
-              }
-            }
           }
-        }
-      });
-    }
-    // Apply filters
-    function applyFilters() {
-      const statusFilter = document.getElementById('statusFilter').value;
-      const riskFilter = document.getElementById('riskFilter').value;
-      let filteredResults = [...currentResults];
-      // Apply status filter
-      if (statusFilter !== 'all') {
-        filteredResults = filteredResults.filter(r => r.status === statusFilter);
-      }
-      // Apply risk filter
-      if (riskFilter !== 'all') {
-        const ranges = {
-          'low': [0, 33],
-          'medium': [34, 66],
-          'high': [67, 100]
-        };
-        filteredResults = filteredResults.filter(r => {
-          const [min, max] = ranges[riskFilter];
-          return r.riskScore >= min && r.riskScore <= max;
-        });
-      }
-      displayResults(filteredResults);
-      updateStats(filteredResults);
-    }
-    // Export data
-    function exportData() {
-      if (currentResults.length === 0) return;
-      const csvData = [
-        ['Nome', 'Cargo', 'Localização', 'Status', 'Score de Risco', 'Análise', 'Recomendações'],
-        ...currentResults.map(agent => [
-          `"${agent.name}"`,
-          `"${agent.position}"`,
-          `"${agent.location}"`,
-          `"${agent.status}"`,
-          agent.riskScore,
-          `"${agent.analysis.replace(/\"/g, '""')}"`,
-          `"${agent.recommendations.join('; ')}"`
-        ])
-      ].join('\n');
-      const blob = new Blob([csvData], { type: 'text/csv' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `analise-forense-${new Date().toISOString().split('T')[0]}.csv`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }
-    // Show error
-    function showError(message) {
-      resultsContainer.innerHTML = `
-        <div class="bg-red-900/50 border border-red-500 rounded-lg p-4">
-          <div class="flex">
-            <div class="flex-shrink-0">
-              <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-              </svg>
-            </div>
-            <div class="ml-3">
-              <p class="text-sm text-red-300">${message}</p>
-            </div>
-          </div>
         </div>
-      `;
-    }
-    // Initialize the plugin
-    init();
-    // Built with anycoder
-    console.log('S.I.E. PRO Forensic Analytics Plugin initialized');
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pesquisa Forense de Pessoas</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     body {
       font-family: 'Inter', sans-serif;
     }
     .loading-spinner {
+      border: 4px solid rgba(255, 255, 255, 0.1);
       border-radius: 50%;
+      border-top: 4px solid #3b82f6;
+      width: 40px;
+      height: 40px;
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
+    .card-hover {
+      transition: all 0.3s ease;
+    }
+    .card-hover:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    }
   </style>
 </head>
+<body class="bg-slate-900 text-slate-200 min-h-screen p-4 font-sans">
+  <div id="root"></div>
+  <script type="text/babel">
+    const PLUGIN_ID = "forensic-person-search-v1";
+    let authToken = null;
+    // Componentes React
+    const AuthStatus = () => {
+      const [status, setStatus] = React.useState("Aguardando Autenticação...");
+      const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+      React.useEffect(() => {
+        window.addEventListener('message', (event) => {
+          if (event.data.type === 'AUTH_TOKEN') {
+            authToken = event.data.token;
+            setStatus("Conectado e Autenticado ✅");
+            setIsAuthenticated(true);
+          }
+        });
+      }, []);
+      return (
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center space-x-2">
+            <div className="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></div>
+            <span className="text-xs text-slate-400">{status}</span>
           </div>
+          <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:text-blue-300 transition-colors">
+            Built with anycoder
+          </a>
         </div>
+      );
+    };
+    const SearchForm = ({ onSearch, isLoading }) => {
+      const [cpf, setCpf] = React.useState("");
+      const [socialProfile, setSocialProfile] = React.useState("");
+      const [years, setYears] = React.useState(5);
+      const handleSubmit = (e) => {
+        e.preventDefault();
+        onSearch({ cpf, socialProfile, years });
+      };
+      return (
+        <form onSubmit={handleSubmit} className="bg-slate-800 p-6 rounded-lg shadow-lg mb-8">
+          <h2 className="text-xl font-semibold mb-6 text-white">Pesquisa Forense</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+            <div>
+              <label className="block text-sm font-medium text-slate-300 mb-1">CPF</label>
+              <input
+                type="text"
+                value={cpf}
+                onChange={(e) => setCpf(e.target.value)}
+                placeholder="000.000.000-00"
+                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
             <div>
+              <label className="block text-sm font-medium text-slate-300 mb-1">Perfil Social</label>
+              <input
+                type="url"
+                value={socialProfile}
+                onChange={(e) => setSocialProfile(e.target.value)}
+                placeholder="https://rede-social.com/perfil"
+                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
             </div>
             <div>
+              <label className="block text-sm font-medium text-slate-300 mb-1">Anos de História</label>
+              <select
+                value={years}
+                onChange={(e) => setYears(parseInt(e.target.value))}
+                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                {[1, 2, 3, 4, 5].map((year) => (
+                  <option key={year} value={year}>{year} ano{year > 1 ? 's' : ''}</option>
+                ))}
               </select>
             </div>
+          </div>
+          <button
+            type="submit"
+            disabled={isLoading}
+            className={`w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition-colors flex items-center justify-center ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
+          >
+            {isLoading ? (
+              <>
+                <div className="loading-spinner mr-2"></div>
+                Processando...
+              </>
+            ) : (
+              'Iniciar Pesquisa Forense'
+            )}
+          </button>
+        </form>
+      );
+    };
+    const ResultsDashboard = ({ results, error }) => {
+      if (error) {
+        return (
+          <div className="bg-red-900/20 border border-red-500 p-4 rounded-lg text-red-300">
+            <h3 className="font-semibold mb-2">Erro na Pesquisa</h3>
+            <p>{error}</p>
+          </div>
+        );
+      }
+      if (!results) {
+        return (
+          <div className="text-center py-12">
+            <p className="text-slate-400">Insira os dados e clique em "Iniciar Pesquisa Forense" para começar</p>
           </div>
+        );
+      }
+      return (
+        <div className="space-y-6">
+          {/* Header com informações básicas */}
+          <div className="bg-slate-800 p-6 rounded-lg shadow-lg">
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
               <div>
+                <h2 className="text-2xl font-bold text-white mb-2">{results.personalInfo.name || "Desconhecido"}</h2>
+                <p className="text-slate-300">CPF: {results.personalInfo.cpf || "Não fornecido"}</p>
+                <p className="text-slate-400 text-sm">Perfil analisado: {results.socialProfile}</p>
               </div>
+              <div className="mt-4 md:mt-0">
+                <span className={`px-3 py-1 rounded-full text-xs font-medium ${results.riskLevel === 'ALTO' ? 'bg-red-500' : results.riskLevel === 'MÉDIO' ? 'bg-yellow-500' : 'bg-green-500'}`}>
+                  Nível de Risco: {results.riskLevel || "Não avaliado"}
+                </span>
               </div>
             </div>
           </div>
+          {/* Cards de informações */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {/* Card de Atividade */}
+            <div className="bg-slate-800 p-6 rounded-lg shadow-lg card-hover">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+                <svg className="w-5 h-5 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                 </svg>
+                Atividade Recente
+              </h3>
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">Posts nos últimos {results.years} anos</span>
+                  <span className="font-medium text-white">{results.activity.postCount || 0}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">Comentários</span>
+                  <span className="font-medium text-white">{results.activity.commentCount || 0}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">Curtidas</span>
+                  <span className="font-medium text-white">{results.activity.likeCount || 0}</span>
+                </div>
               </div>
             </div>
+            {/* Card de Análise de Sentimento */}
+            <div className="bg-slate-800 p-6 rounded-lg shadow-lg card-hover">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+                <svg className="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
+                Análise de Sentimento
+              </h3>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-slate-400 text-sm">Positivo</span>
+                  <div className="w-2/3 bg-slate-700 rounded-full h-2.5">
+                    <div className="bg-green-500 h-2.5 rounded-full" style={{ width: `${results.sentiment.positive || 0}%` }}></div>
+                  </div>
+                  <span className="text-white text-sm ml-2">{results.sentiment.positive || 0}%</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-slate-400 text-sm">Neutro</span>
+                  <div className="w-2/3 bg-slate-700 rounded-full h-2.5">
+                    <div className="bg-blue-500 h-2.5 rounded-full" style={{ width: `${results.sentiment.neutral || 0}%` }}></div>
+                  </div>
+                  <span className="text-white text-sm ml-2">{results.sentiment.neutral || 0}%</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-slate-400 text-sm">Negativo</span>
+                  <div className="w-2/3 bg-slate-700 rounded-full h-2.5">
+                    <div className="bg-red-500 h-2.5 rounded-full" style={{ width: `${results.sentiment.negative || 0}%` }}></div>
+                  </div>
+                  <span className="text-white text-sm ml-2">{results.sentiment.negative || 0}%</span>
+                </div>
               </div>
             </div>
+            {/* Card de Conexões */}
+            <div className="bg-slate-800 p-6 rounded-lg shadow-lg card-hover">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+                <svg className="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+                Conexões
+              </h3>
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">Amigos/Seguidores</span>
+                  <span className="font-medium text-white">{results.connections.friends || 0}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">Grupos</span>
+                  <span className="font-medium text-white">{results.connections.groups || 0}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">Páginas Seguidas</span>
+                  <span className="font-medium text-white">{results.connections.pages || 0}</span>
+                </div>
+              </div>
             </div>
           </div>
+          {/* Tabela de Posts Importantes */}
+          <div className="bg-slate-800 p-6 rounded-lg shadow-lg">
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+              <svg className="w-5 h-5 mr-2 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3h3m-3 4h3m-3 4h3m-3 4h3" />
+              </svg>
+              Posts Importantes (Últimos {results.years} anos)
+            </h3>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead className="text-slate-400 border-b border-slate-700">
+                  <tr>
+                    <th className="px-4 py-2 text-left">Data</th>
+                    <th className="px-4 py-2 text-left">Conteúdo</th>
+                    <th className="px-4 py-2 text-left">Sentimento</th>
+                    <th className="px-4 py-2 text-left">Engajamento</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {results.importantPosts && results.importantPosts.length > 0 ? (
+                    results.importantPosts.map((post, index) => (
+                      <tr key={index} className="border-b border-slate-700 hover:bg-slate-700/50 transition-colors">
+                        <td className="px-4 py-3 text-slate-300">{new Date(post.date).toLocaleDateString()}</td>
+                        <td className="px-4 py-3 text-white max-w-xs truncate">{post.content}</td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${post.sentiment === 'POSITIVO' ? 'bg-green-500' : post.sentiment === 'NEGATIVO' ? 'bg-red-500' : 'bg-blue-500'}`}>
+                            {post.sentiment}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-white">{post.engagement}</td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td colSpan="4" className="px-4 py-6 text-center text-slate-400">Nenhum post importante encontrado</td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
           </div>
+          {/* Resumo da IA */}
+          <div className="bg-slate-800 p-6 rounded-lg shadow-lg">
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+              <svg className="w-5 h-5 mr-2 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+              </svg>
+              Resumo da Análise Forense (IA Gemini)
+            </h3>
+            <div className="prose prose-invert max-w-none text-slate-300">
+              <p className="whitespace-pre-wrap">{results.aiSummary || "Nenhum resumo disponível. A análise da IA Gemini não retornou resultados."}</p>
             </div>
           </div>
         </div>
+      );
+    };
+    const App = () => {
+      const [results, setResults] = React.useState(null);
+      const [error, setError] = React.useState(null);
+      const [isLoading, setIsLoading] = React.useState(false);
+      const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+      React.useEffect(() => {
+        window.addEventListener('message', (event) => {
+          if (event.data.type === 'AUTH_TOKEN') {
+            authToken = event.data.token;
+            setIsAuthenticated(true);
           }
         });
+      }, []);
+      const handleSearch = async ({ cpf, socialProfile, years }) => {
+        if (!authToken) {
+          setError("Token de autenticação não disponível. Por favor, recarregue a página.");
+          return;
         }
+        setIsLoading(true);
+        setError(null);
+        setResults(null);
+        try {
+          const response = await fetch('/api/client/plugin/ai', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${authToken}`
             },
+            body: JSON.stringify({
+              plugin_id: PLUGIN_ID,
+              user_prompt: `Realize uma pesquisa forense detalhada da pessoa com CPF ${cpf} e perfil social ${socialProfile}. Analise os últimos ${years} anos de atividade. Estruture os dados nos seguintes campos:
+              1. personalInfo: {name, cpf, age, location}
+              2. activity: {postCount, commentCount, likeCount}
+              3. sentiment: {positive, neutral, negative} (percentages)
+              4. connections: {friends, groups, pages}
+              5. importantPosts: [ {date, content, sentiment, engagement} ] (max 10)
+              6. riskLevel: "BAIXO", "MÉDIO" ou "ALTO"
+              7. aiSummary: resumo profissional em português (máx 500 palavras) com insights forenses
+              Use a API do Gemini para estruturar e analisar as informações. Inclua qualquer comportamento suspeito, padrões de atividade e potenciais riscos identificados.`
+            })
+          });
+          if (!response.ok) {
+            throw new Error(`Erro na API: ${response.status} ${response.statusText}`);
           }
+          const data = await response.json();
+          setResults({
+            ...data,
+            cpf,
+            socialProfile,
+            years
+          });
+        } catch (err) {
+          console.error("Erro na pesquisa:", err);
+          setError(err.message || "Falha ao processar a pesquisa forense. Tente novamente.");
+        } finally {
+          setIsLoading(false);
+        }
+      };
+      return (
+        <div className="max-w-7xl mx-auto">
+          <AuthStatus />
+          <SearchForm onSearch={handleSearch} isLoading={isLoading} />
+          <ResultsDashboard results={results} error={error} />
         </div>
+      );
+    };
+    // Renderizar o aplicativo React
+    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
   </script>
 </body>
 </html>