Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sistema de Prospecção - Controle de Atendimento</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .drag-area { | |
| border: 2px dashed #ccc; | |
| border-radius: 8px; | |
| transition: all 0.3s; | |
| } | |
| .drag-area.active { | |
| border-color: #4f46e5; | |
| background-color: #f0f7ff; | |
| } | |
| .client-card { | |
| transition: all 0.2s; | |
| } | |
| .client-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| #syncStatus { | |
| transition: all 0.3s; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold text-indigo-800">Sistema de Prospecção</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div id="syncStatus" class="flex items-center px-3 py-1 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Sincronizado</span> | |
| </div> | |
| <div class="relative"> | |
| <button id="userMenuBtn" class="flex items-center space-x-2 focus:outline-none"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span class="font-medium">Vendedor</span> | |
| </button> | |
| <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Perfil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mt-2">Controle de atendimento diário para equipe de vendas</p> | |
| </header> | |
| <!-- Tabs --> | |
| <div class="mb-8 border-b border-gray-200"> | |
| <nav class="flex space-x-8"> | |
| <button data-tab="dashboard" class="tab-btn py-4 px-1 border-b-2 font-medium text-sm border-indigo-500 text-indigo-600">Dashboard</button> | |
| <button data-tab="schedule" class="tab-btn py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Agendamentos</button> | |
| <button data-tab="clients" class="tab-btn py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Clientes</button> | |
| <button data-tab="reports" class="tab-btn py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Relatórios</button> | |
| <button data-tab="settings" class="tab-btn py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Configurações</button> | |
| </nav> | |
| </div> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Clientes Hoje</p> | |
| <h3 class="text-2xl font-bold" id="todayClientsCount">30</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Vendedora 1</span> | |
| <span>15/15</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Vendedora 2</span> | |
| <span>15/15</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Contatos Realizados</p> | |
| <h3 class="text-2xl font-bold" id="contactsMade">24</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-phone-alt text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span>Atendidos - 18</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <span>Reagendados - 4</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <span>Não atendidos - 2</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Interesses de Compra</p> | |
| <h3 class="text-2xl font-bold" id="purchaseInterest">12</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Alta probabilidade</span> | |
| <span>5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Média probabilidade</span> | |
| <span>4</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-400 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Baixa probabilidade</span> | |
| <span>3</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-300 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Atendimentos de Hoje</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-md text-sm">Exportar</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm">Filtrar</button> | |
| </div> | |
| </div> | |
| <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">Hora</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendedor</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">Interesse</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" id="todayAppointments"> | |
| <!-- Dynamic content will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Schedule Tab --> | |
| <div id="schedule" class="tab-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Importar Lista de Clientes</h3> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div id="dragArea" class="drag-area p-8 text-center cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-file-excel text-4xl text-green-600 mb-3"></i> | |
| <p class="font-medium">Arraste e solte seu arquivo Excel aqui</p> | |
| <p class="text-gray-500 text-sm mt-1">ou</p> | |
| <button id="browseExcelBtn" class="mt-3 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Selecione o arquivo</button> | |
| <input type="file" id="excelFile" accept=".xlsx, .xls" class="hidden"> | |
| </div> | |
| </div> | |
| <div id="pdfDragArea" class="drag-area p-8 text-center cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-file-pdf text-4xl text-red-600 mb-3"></i> | |
| <p class="font-medium">Arraste e solte seu arquivo PDF aqui</p> | |
| <p class="text-gray-500 text-sm mt-1">ou</p> | |
| <button id="browsePdfBtn" class="mt-3 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Selecione o arquivo</button> | |
| <input type="file" id="pdfFile" accept=".pdf" class="hidden"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6" id="importedDataPreview" style="display: none;"> | |
| <h4 class="font-medium mb-3">Pré-visualização dos dados importados</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">Nome</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefone</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Origem</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="importedDataTable"> | |
| <!-- Dynamic content will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button id="confirmImportBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">Confirmar Importação</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Agendar Atendimentos</h3> | |
| <div class="flex space-x-2"> | |
| <button id="autoScheduleBtn" class="px-3 py-1 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700">Agendamento Automático</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data de Atendimento</label> | |
| <input type="date" id="scheduleDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vendedor Responsável</label> | |
| <select id="salespersonSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="vendedora1">Vendedora 1</option> | |
| <option value="vendedora2">Vendedora 2</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Clientes Disponíveis</label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="availableClients"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Agendamentos Confirmados</label> | |
| <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">Hora</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefone</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" id="scheduledClients"> | |
| <!-- Dynamic content will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clients Tab --> | |
| <div id="clients" class="tab-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Contato com Clientes</h3> | |
| <div class="flex space-x-2"> | |
| <input type="text" id="clientSearch" placeholder="Buscar cliente..." class="px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <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">Cliente</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">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Interesse</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Próximo Contato</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" id="clientContactsTable"> | |
| <!-- Dynamic content will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Client Contact Modal --> | |
| <div id="contactModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium" id="modalClientName">Registrar Contato</h3> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <form id="contactForm"> | |
| <input type="hidden" id="modalClientId"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status do Contato</label> | |
| <select id="contactStatus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="contacted">Contato realizado</option> | |
| <option value="rescheduled">Reagendado</option> | |
| <option value="not_answered">Não atendeu</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Interesse de Compra</label> | |
| <select id="purchaseInterest" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="high">Alto interesse</option> | |
| <option value="medium">Interesse médio</option> | |
| <option value="low">Baixo interesse</option> | |
| <option value="none">Sem interesse</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Produtos Oferecidos</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="product1" name="products" value="Produto A" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="product1" class="ml-2 block text-sm text-gray-700">Produto A</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="product2" name="products" value="Produto B" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="product2" class="ml-2 block text-sm text-gray-700">Produto B</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="product3" name="products" value="Produto C" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="product3" class="ml-2 block text-sm text-gray-700">Produto C</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="product4" name="products" value="Produto D" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="product4" class="ml-2 block text-sm text-gray-700">Produto D</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Previsão de Compra</label> | |
| <select id="purchaseForecast" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="1_week">1 semana</option> | |
| <option value="2_weeks">2 semanas</option> | |
| <option value="1_month">1 mês</option> | |
| <option value="3_months">3 meses</option> | |
| <option value="undefined">Indefinido</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Próximas Ações</label> | |
| <textarea id="nextActions" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Observações</label> | |
| <textarea id="contactNotes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Próximo Contato</label> | |
| <input type="datetime-local" id="nextContactDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button type="button" id="saveContactBtn" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Salvar Contato</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="px-6 py-3 border-t border-gray-200 flex justify-end"> | |
| <button type="button" id="closeModalBtn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">Fechar</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reports Tab --> | |
| <div id="reports" class="tab-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Relatórios de Atendimento</h3> | |
| <div class="flex space-x-2"> | |
| <button id="exportReportBtn" class="px-3 py-1 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700">Exportar Relatório</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Período</label> | |
| <select id="reportPeriod" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="today">Hoje</option> | |
| <option value="week">Esta semana</option> | |
| <option value="month">Este mês</option> | |
| <option value="custom">Personalizado</option> | |
| </select> | |
| </div> | |
| <div id="customDateStart" class="hidden"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data Inicial</label> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div id="customDateEnd" class="hidden"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data Final</label> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium mb-3">Status dos Contatos</h4> | |
| <canvas id="contactStatusChart" height="200"></canvas> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium mb-3">Nível de Interesse</h4> | |
| <canvas id="interestLevelChart" height="200"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 mb-8"> | |
| <h4 class="font-medium mb-3">Produtos Mais Oferecidos</h4> | |
| <canvas id="productsChart" height="150"></canvas> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium mb-3">Detalhes dos Contatos</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">Cliente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendedor</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">Interesse</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produtos</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="reportDetailsTable"> | |
| <!-- Dynamic content will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div id="settings" class="tab-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <h3 class="text-lg font-medium mb-6">Configurações do Sistema</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="font-medium mb-4 text-indigo-700">Configurações de Agendamento</h4> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Intervalo entre Atendimentos (minutos)</label> | |
| <input type="number" value="15" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Horário de Início</label> | |
| <input type="time" value="09:00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Horário de Término</label> | |
| <input type="time" value=" | |
| </html> | |