Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BB3 - Plataforma de Gestão de IA Empresarial</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-collapsed { | |
| width: 80px; | |
| } | |
| .sidebar-collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .menu-item { | |
| justify-content: center; | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .wizard-step { | |
| display: none; | |
| } | |
| .wizard-step.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Main Container --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="flex flex-col w-64 bg-white border-r border-gray-200 transition-all duration-300 ease-in-out"> | |
| <!-- Logo --> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">BB3</div> | |
| <span class="logo-text text-xl font-semibold text-gray-800">BB3 Platform</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Menu --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="sidebar-text text-xs font-semibold text-gray-500 uppercase tracking-wider">Geral</h3> | |
| <ul class="mt-2 space-y-1"> | |
| <li> | |
| <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-blue-700 bg-blue-50"> | |
| <i class="fas fa-home mr-3 text-blue-600"></i> | |
| <span class="sidebar-text">Home</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-newspaper mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Notícias</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Configurações</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="sidebar-text text-xs font-semibold text-gray-500 uppercase tracking-wider">Áreas</h3> | |
| <ul class="mt-2 space-y-1"> | |
| <li> | |
| <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-users mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Recursos Humanos</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Vendas</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-headset mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Atendimento</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-3 sidebar-text"> | |
| <p class="text-sm font-medium text-gray-700">John Doe</p> | |
| <p class="text-xs font-medium text-gray-500">Administrador</p> | |
| </div> | |
| <button class="ml-auto text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <!-- Search Bar --> | |
| <div class="flex-1 flex items-center"> | |
| <div class="w-full max-w-md"> | |
| <label for="search" class="sr-only">Pesquisar</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input id="search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Pesquisar" type="search"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Menu --> | |
| <div class="flex items-center"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <span class="sr-only">Notificações</span> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="ml-4 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <span class="sr-only">Ajuda</span> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Page Content --> | |
| <main class="flex-1 overflow-y-auto p-4 bg-gray-50"> | |
| <!-- Dashboard Content --> | |
| <div id="home-content"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1> | |
| <p class="mt-1 text-sm text-gray-500">Visão geral e insights da sua plataforma BB3</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Agentes Ativos</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">12</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver todos</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-tasks text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Tarefas Hoje</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">8</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver agenda</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-chart-line text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Desempenho</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">92%</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver métricas</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-users text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Novos Candidatos</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">5</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver RH</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Insights --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Performance Chart --> | |
| <div class="bg-white shadow rounded-lg p-6 col-span-2 card-hover transition-all"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Desempenho dos Agentes</h2> | |
| <div class="h-64"> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Quick Insights --> | |
| <div class="bg-white shadow rounded-lg p-6 card-hover transition-all"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Insights Rápidos</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700">O agente de RH completou 85% das entrevistas agendadas esta semana.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700">Avaliação de candidatos aumentou 20% em relação ao mês passado.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700">3 vagas urgentes precisam de atenção no departamento de TI.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Chat --> | |
| <div class="bg-white shadow rounded-lg overflow-hidden card-hover transition-all"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Assistente BB3</h2> | |
| <p class="mt-1 text-sm text-gray-500">Converse com nosso assistente de IA para tirar dúvidas e realizar ações</p> | |
| </div> | |
| <div class="p-4 h-96 overflow-y-auto bg-gray-50" id="chat-messages"> | |
| <div class="flex mb-4"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm chat-message"> | |
| <p class="text-sm text-gray-800">Olá! Sou o assistente da plataforma BB3. Como posso te ajudar hoje?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex"> | |
| <input type="text" id="chat-input" placeholder="Digite sua mensagem..." class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"> | |
| <button id="send-message" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded"> | |
| <i class="fas fa-calendar-alt mr-1"></i> Agendar entrevista | |
| </button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded"> | |
| <i class="fas fa-file-alt mr-1"></i> Ver currículos | |
| </button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded"> | |
| <i class="fas fa-chart-bar mr-1"></i> Relatório de desempenho | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HR Content (Hidden by default) --> | |
| <div id="hr-content" class="hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-900">Recursos Humanos</h1> | |
| <p class="mt-1 text-sm text-gray-500">Gerenciamento de candidatos, entrevistas e processos seletivos</p> | |
| </div> | |
| <!-- Wizard for first time setup --> | |
| <div id="hr-wizard" class="bg-white shadow rounded-lg overflow-hidden mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200 bg-blue-50"> | |
| <h2 class="text-lg font-medium text-gray-900">Configuração Inicial do Módulo RH</h2> | |
| <p class="mt-1 text-sm text-gray-600">Vamos configurar seu módulo de Recursos Humanos para começar a usar</p> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Wizard Steps --> | |
| <div class="wizard-step active" id="step1"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">1. Perfil da Empresa</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="company-name" class="block text-sm font-medium text-gray-700">Nome da Empresa</label> | |
| <input type="text" id="company-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="company-description" class="block text-sm font-medium text-gray-700">Descrição</label> | |
| <textarea id="company-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <div> | |
| <label for="company-industry" class="block text-sm font-medium text-gray-700">Setor de Atuação</label> | |
| <select id="company-industry" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Selecione...</option> | |
| <option>Tecnologia</option> | |
| <option>Saúde</option> | |
| <option>Educação</option> | |
| <option>Finanças</option> | |
| <option>Varejo</option> | |
| <option>Outro</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wizard-step" id="step2"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">2. Cargos e Posições</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Adicionar Cargos</label> | |
| <div class="mt-1 flex"> | |
| <input type="text" id="position-name" placeholder="Nome do cargo" class="flex-1 border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <button id="add-position" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Cargos Adicionados</h4> | |
| <ul id="positions-list" class="space-y-2"> | |
| <!-- Positions will be added here --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wizard-step" id="step3"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">3. Critérios de Avaliação</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-600">Selecione os critérios que serão usados para avaliar candidatos:</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-communication" name="criteria-communication" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-communication" class="font-medium text-gray-700">Comunicação</label> | |
| <p class="text-gray-500">Habilidade de se expressar claramente</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-technical" name="criteria-technical" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-technical" class="font-medium text-gray-700">Conhecimento Técnico</label> | |
| <p class="text-gray-500">Domínio das habilidades necessárias</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-teamwork" name="criteria-teamwork" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-teamwork" class="font-medium text-gray-700">Trabalho em Equipe</label> | |
| <p class="text-gray-500">Capacidade de colaboração</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-problem-solving" name="criteria-problem-solving" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-problem-solving" class="font-medium text-gray-700">Resolução de Problemas</label> | |
| <p class="text-gray-500">Habilidade analítica e criatividade</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="custom-criteria" class="block text-sm font-medium text-gray-700">Critérios Personalizados</label> | |
| <textarea id="custom-criteria" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Adicione critérios específicos para sua empresa (separados por vírgula)"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wizard-step" id="step4"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">4. Configuração do Entrevistador</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="interviewer-name" class="block text-sm font-medium text-gray-700">Nome do Entrevistador Virtual</label> | |
| <input type="text" id="interviewer-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" value="Entrevistador BB3"> | |
| </div> | |
| <div> | |
| <label for="interviewer-style" class="block text-sm font-medium text-gray-700">Estilo de Entrevista</label> | |
| <select id="interviewer-style" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Formal</option> | |
| <option>Descontraído</option> | |
| <option>Técnico</option> | |
| <option>Comportamental</option> | |
| <option>Misto</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Tipo de Perguntas</label> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex items-center"> | |
| <input id="questions-technical" name="questions-type" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| <label for="questions-technical" class="ml-2 block text-sm text-gray-700">Técnicas</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="questions-behavioral" name="questions-type" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| <label for="questions-behavioral" class="ml-2 block text-sm text-gray-700">Comportamentais</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="questions-case" name="questions-type" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| <label for="questions-case" class="ml-2 block text-sm text-gray-700">Estudos de Caso</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between"> | |
| <button id="wizard-prev" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 hidden"> | |
| <i class="fas fa-arrow-left mr-2"></i> Voltar | |
| </button> | |
| <button id="wizard-next" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Próximo <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button id="wizard-finish" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 hidden"> | |
| Finalizar Configuração <i class="fas fa-check ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- HR Dashboard --> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-user-tie text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Candidatos</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">24</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver todos</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-calendar-check text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Entrevistas Hoje</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">5</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver agenda</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-file-alt text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Currículos</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">42</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Analisar</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-bullhorn text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Vagas Abertas</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">8</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Gerenciar</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HR Sections --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Positions --> | |
| <div class="bg-white shadow rounded-lg p-6 card-hover transition-all"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Cargos/Posições</h2> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div> | |
| <p class="font-medium">Desenvolvedor Front-end</p> | |
| <p class="text-sm text-gray-500">2 vagas abertas</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div> | |
| <p class="font-medium">Analista de Dados</p> | |
| <p class="text-sm text-gray-500">1 vaga aberta</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div> | |
| <p class="font-medium">Gerente de Projetos</p> | |
| <p class="text-sm text-gray-500">3 candidatos em processo</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interviews --> | |
| <div class="bg-white shadow rounded-lg p-6 card-hover transition-all"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Entrevistas</h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-calendar"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center justify-between"> | |
| <p class="font-medium">João Silva</p> | |
| <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">10:00</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Desenvolvedor Front-end</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center justify-between"> | |
| <p class="font-medium">Maria Souza</p> | |
| <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">14:30</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Analista de Dados</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center justify-between"> | |
| <p class="font-medium">Carlos Oliveira</p> | |
| <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">16:00</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Gerente de Projetos</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candidates --> | |
| <div class="bg-white shadow rounded-lg p-6 card-hover transition-all"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-900">Candidatos Recentes</h2> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-md"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Ana Beatriz</p> | |
| <p class="text-sm text-gray-500">Front-end Developer</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">Nova</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-md"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Roberto Almeida</p> | |
| <p class="text-sm text-gray-500">Data Scientist</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">Aprovado</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-md"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Juliana Costa</p> | |
| <p class="text-sm text-gray-500">UX Designer</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">Em análise</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HR Actions --> | |
| <div class="bg-white shadow rounded-lg overflow-hidden card-hover transition-all"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Ações Rápidas</h2> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50"> | |
| <div class="mr-3 bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-calendar-plus text-blue-600"></i> | |
| </div> | |
| <span>Agendar Entrevista</span> | |
| </button> | |
| <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50"> | |
| <div class="mr-3 bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-user-plus text-green-600"></i> | |
| </div> | |
| <span>Adicionar Candidato</span> | |
| </button> | |
| <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50"> | |
| <div class="mr-3 bg-purple-100 p-2 rounded-full"> | |
| <i class="fas fa-bullhorn text-purple-600"></i> | |
| </div> | |
| <span>Criar Nova Vaga</span> | |
| </button> | |
| <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50"> | |
| <div class="mr-3 bg-yellow-100 p-2 rounded-full"> | |
| <i class="fas fa-file-upload text-yellow-600"></i> | |
| </div> | |
| <span>Importar Currículos</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('toggle-sidebar').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.toggle('sidebar-collapsed'); | |
| }); | |
| // Chat functionality | |
| document.getElementById('send-message').addEventListener('click', function() { | |
| const input = document.getElementById('chat-input'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const chatContainer = document.getElementById('chat-messages'); | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'flex mb-4 justify-end'; | |
| userMessage.innerHTML = ` | |
| <div class="flex flex-col items-end"> | |
| <div class="bg-blue-500 p-3 rounded-lg shadow-sm chat-message"> | |
| <p class="text-sm text-white">${message}</p> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userMessage); | |
| // Clear input | |
| input.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const responses = [ | |
| "Entendi sua solicitação. Posso te ajudar com algo mais específico?", | |
| "Ótima pergunta! Estou processando sua requisição...", | |
| "Com base nos dados disponíveis, posso te informar que...", | |
| "Para essa ação, você precisará acessar a seção de configurações.", | |
| "Posso te mostrar um tutorial sobre como realizar essa tarefa?" | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'flex mb-4'; | |
| aiMessage.innerHTML = ` | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm chat-message"> | |
| <p class="text-sm text-gray-800">${randomResponse}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(aiMessage); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1000); | |
| } | |
| }); | |
| // Allow pressing Enter to send message | |
| document.getElementById('chat-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.getElementById('send-message').click(); | |
| } | |
| }); | |
| // HR Wizard functionality | |
| const wizardSteps = document.querySelectorAll('.wizard-step'); | |
| const wizardNext = document.getElementById('wizard-next'); | |
| const wizardPrev = document.getElementById('wizard-prev'); | |
| const wizardFinish = document.getElementById('wizard-finish'); | |
| let currentStep = 0; | |
| wizardNext.addEventListener('click', function() { | |
| if (currentStep < wizardSteps.length - 1) { | |
| wizardSteps[currentStep].classList.remove('active'); | |
| currentStep++; | |
| wizardSteps[currentStep].classList.add('active'); | |
| // Update button visibility | |
| wizardPrev.classList.remove('hidden'); | |
| if (currentStep === wizardSteps.length - 1) { | |
| wizardNext.classList.add('hidden'); | |
| wizardFinish.classList.remove('hidden'); | |
| } | |
| } | |
| }); | |
| wizardPrev.addEventListener('click', function() { | |
| if (currentStep > 0) { | |
| wizardSteps[currentStep].classList.remove('active'); | |
| currentStep--; | |
| wizardSteps[currentStep].classList.add('active'); | |
| // Update button visibility | |
| wizardFinish.classList.add('hidden'); | |
| wizardNext.classList.remove('hidden'); | |
| if (currentStep === 0) { | |
| wizardPrev.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| wizardFinish.addEventListener('click', function() { | |
| alert('Configuração inicial do módulo RH concluída com sucesso!'); | |
| document.getElementById('hr-wizard').classList.add('hidden'); | |
| }); | |
| // Add position functionality | |
| document.getElementById('add-position').addEventListener('click', function() { | |
| const positionName = document.getElementById('position-name').value.trim(); | |
| if (positionName) { | |
| const positionsList = document.getElementById('positions-list'); | |
| const positionItem = document.createElement('li'); | |
| positionItem.className = 'flex items-center justify-between bg-white p-2 rounded-md shadow-sm'; | |
| positionItem.innerHTML = ` | |
| <span class="text-sm">${positionName}</span> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| positionsList.appendChild(positionItem); | |
| document.getElementById('position-name').value = ''; | |
| // Add delete functionality | |
| positionItem.querySelector('button').addEventListener('click', function() { | |
| positionsList.removeChild(positionItem); | |
| }); | |
| } | |
| }); | |
| // Performance chart | |
| const ctx = document.getElementById('performanceChart').getContext('2d'); | |
| const performanceChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'], | |
| datasets: [ | |
| { | |
| label: 'Entrevistador', | |
| data: [65, 59, 80, 81, 56, 55, 90], | |
| borderColor: 'rgb(99, 102, 241)', | |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Atendimento', | |
| data: [28, 48, 40, 19, 86, 27, 45], | |
| borderColor: 'rgb(16, 185, 129)', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Vendas', | |
| data: [45, 25, 60, 40, 56, 67, 75], | |
| borderColor: 'rgb(245, 158, 11)', | |
| backgroundColor: 'rgba(245, 158, 11, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Navigation between home and HR | |
| document.querySelectorAll('#sidebar a').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Remove active class from all links | |
| document.querySelectorAll('#sidebar a').forEach(l => { | |
| l.classList.remove('text-blue-700', 'bg-blue-50'); | |
| l.classList.add('text-gray-700', 'hover:text-gray-900', 'hover:bg-gray-100'); | |
| }); | |
| // Add active class to clicked link | |
| this.classList.remove('text-gray-700', 'hover:text-gray-900', 'hover:bg-gray-100'); | |
| this.classList.add('text-blue-700', 'bg-blue-50'); | |
| // Show appropriate content | |
| if (this.querySelector('span').textContent === 'Recursos Humanos') { | |
| document.getElementById('home-content').classList.add('hidden'); | |
| document.getElementById('hr-content').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('home-content').classList.remove('hidden'); | |
| document.getElementById('hr-content').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=menezes-nathan/testebb3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |