| | <!DOCTYPE html> |
| | <html lang="pt-BR"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>AtendiBot Hub - Painel Administrativo</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"> |
| | <script> |
| | tailwind.config = { |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: '#2563eb', |
| | secondary: '#1e40af', |
| | accent: '#3b82f6', |
| | dark: '#1f2937', |
| | light: '#f9fafb' |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <style> |
| | .sidebar { |
| | transition: all 0.3s ease; |
| | } |
| | .sidebar-collapsed { |
| | width: 70px; |
| | } |
| | .sidebar-expanded { |
| | width: 250px; |
| | } |
| | .main-content { |
| | transition: margin-left 0.3s ease; |
| | } |
| | .content-expanded { |
| | margin-left: 250px; |
| | } |
| | .content-collapsed { |
| | margin-left: 70px; |
| | } |
| | .chart-container { |
| | height: 300px; |
| | } |
| | .qr-code-placeholder { |
| | width: 200px; |
| | height: 200px; |
| | background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 10px, #d1d5db 10px, #d1d5db 20px); |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | color: #6b7280; |
| | } |
| | .logo-upload { |
| | border: 2px dashed #d1d5db; |
| | border-radius: 0.5rem; |
| | padding: 1rem; |
| | text-align: center; |
| | cursor: pointer; |
| | } |
| | .logo-upload:hover { |
| | border-color: #3b82f6; |
| | } |
| | .logo-preview { |
| | max-width: 150px; |
| | max-height: 150px; |
| | display: none; |
| | } |
| | .nps-scale { |
| | display: flex; |
| | justify-content: space-between; |
| | margin-top: 1rem; |
| | } |
| | .nps-option { |
| | width: 30px; |
| | height: 30px; |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | cursor: pointer; |
| | font-size: 0.8rem; |
| | font-weight: bold; |
| | } |
| | .nps-option:hover { |
| | transform: scale(1.1); |
| | } |
| | .selected { |
| | background-color: #3b82f6; |
| | color: white; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | |
| | <div id="login-screen" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-50"> |
| | <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md"> |
| | <div class="text-center mb-8"> |
| | <h1 class="text-3xl font-bold text-primary">AtendiBot Hub</h1> |
| | <p class="text-gray-600 mt-2">Painel Administrativo</p> |
| | </div> |
| | <form id="login-form" class="space-y-6"> |
| | <div> |
| | <label for="email" class="block text-sm font-medium text-gray-700">E-mail</label> |
| | <input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="password" class="block text-sm font-medium text-gray-700">Senha</label> |
| | <input type="password" id="password" name="password" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center"> |
| | <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> |
| | <label for="remember-me" class="ml-2 block text-sm text-gray-700">Lembrar-me</label> |
| | </div> |
| | <div class="text-sm"> |
| | <a href="#" class="font-medium text-primary hover:text-secondary" onclick="showForgotPassword()">Esqueceu sua senha?</a> |
| | </div> |
| | </div> |
| | <div> |
| | <button type="button" onclick="login()" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | Entrar |
| | </button> |
| | </div> |
| | </form> |
| | <div class="mt-6 text-center text-sm"> |
| | <p class="text-gray-600">Não tem uma conta? <a href="#" class="font-medium text-primary hover:text-secondary" onclick="showRegister()">Cadastre-se</a></p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="forgot-password-modal" class="hidden fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-50"> |
| | <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md"> |
| | <div class="text-center mb-6"> |
| | <h2 class="text-2xl font-bold text-primary">Redefinir Senha</h2> |
| | <p class="text-gray-600 mt-2">Digite seu e-mail para receber o link de redefinição</p> |
| | </div> |
| | <form class="space-y-6"> |
| | <div> |
| | <label for="reset-email" class="block text-sm font-medium text-gray-700">E-mail</label> |
| | <input type="email" id="reset-email" name="reset-email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div class="flex space-x-4"> |
| | <button type="button" onclick="hideForgotPassword()" class="w-1/2 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | Cancelar |
| | </button> |
| | <button type="button" onclick="sendResetLink()" class="w-1/2 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | Enviar Link |
| | </button> |
| | </div> |
| | </form> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="register-modal" class="hidden fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-50"> |
| | <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md overflow-y-auto" style="max-height: 90vh;"> |
| | <div class="text-center mb-6"> |
| | <h2 class="text-2xl font-bold text-primary">Cadastro de Usuário</h2> |
| | <p class="text-gray-600 mt-2">Preencha os campos abaixo para criar sua conta</p> |
| | </div> |
| | <form class="space-y-6"> |
| | <div> |
| | <label for="register-name" class="block text-sm font-medium text-gray-700">Nome Completo</label> |
| | <input type="text" id="register-name" name="register-name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="register-email" class="block text-sm font-medium text-gray-700">E-mail</label> |
| | <input type="email" id="register-email" name="register-email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="register-password" class="block text-sm font-medium text-gray-700">Senha</label> |
| | <input type="password" id="register-password" name="register-password" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="register-confirm-password" class="block text-sm font-medium text-gray-700">Confirmar Senha</label> |
| | <input type="password" id="register-confirm-password" name="register-confirm-password" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="register-role" class="block text-sm font-medium text-gray-700">Função</label> |
| | <select id="register-role" name="register-role" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | <option value="consultor">Consultor</option> |
| | <option value="operador">Operador</option> |
| | <option value="administrador">Administrador</option> |
| | </select> |
| | </div> |
| | <div class="flex space-x-4"> |
| | <button type="button" onclick="hideRegister()" class="w-1/2 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | Cancelar |
| | </button> |
| | <button type="button" onclick="registerUser()" class="w-1/2 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | Cadastrar |
| | </button> |
| | </div> |
| | </form> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="app-layout" class="hidden h-screen flex flex-col"> |
| | |
| | <nav class="bg-white shadow-sm"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between h-16"> |
| | <div class="flex items-center"> |
| | <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | <div class="ml-4 flex items-center"> |
| | <h1 class="text-xl font-bold text-primary">AtendiBot Hub</h1> |
| | </div> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="ml-4 flex items-center md:ml-6"> |
| | <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-primary"> |
| | <span class="sr-only">Notificações</span> |
| | <i class="fas fa-bell"></i> |
| | </button> |
| | <div class="ml-3 relative"> |
| | <div> |
| | <button id="user-menu" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" aria-expanded="false" aria-haspopup="true"> |
| | <span class="sr-only">Abrir menu do usuário</span> |
| | <img class="h-8 w-8 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=""> |
| | </button> |
| | </div> |
| | <div id="user-menu-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"> |
| | <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Seu perfil</a> |
| | <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Configurações</a> |
| | <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" onclick="logout()">Sair</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <div class="flex flex-1 overflow-hidden"> |
| | |
| | <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-md flex flex-col"> |
| | <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto"> |
| | <div class="flex items-center justify-center px-4 mb-8"> |
| | <div class="text-primary font-bold text-xl"> |
| | <i class="fas fa-robot mr-2"></i> |
| | <span id="sidebar-logo-text">AtendiBot</span> |
| | </div> |
| | </div> |
| | <nav class="flex-1 px-2 space-y-1"> |
| | <div> |
| | <button onclick="showDashboard()" class="dashboard-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full bg-gray-100 text-primary"> |
| | <i class="fas fa-tachometer-alt mr-3 text-primary"></i> |
| | <span class="sidebar-item-text">Dashboard</span> |
| | </button> |
| | </div> |
| | <div> |
| | <button onclick="showWhatsAppIntegration()" class="whatsapp-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fab fa-whatsapp mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">WhatsApp</span> |
| | </button> |
| | </div> |
| | <div> |
| | <button onclick="showClients()" class="clients-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fas fa-users mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">Clientes</span> |
| | </button> |
| | </div> |
| | <div> |
| | <button onclick="showScheduling()" class="scheduling-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fas fa-calendar-alt mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">Agendamentos</span> |
| | </button> |
| | </div> |
| | <div> |
| | <button onclick="showTeam()" class="team-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fas fa-user-tie mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">Colaboradores</span> |
| | </button> |
| | </div> |
| | <div> |
| | <button onclick="showFinance()" class="finance-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fas fa-wallet mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">Financeiro</span> |
| | </button> |
| | </div> |
| | <div> |
| | <button onclick="showFeedback()" class="feedback-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fas fa-star mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">Feedback</span> |
| | </button> |
| | </div> |
| | <div class="pt-4"> |
| | <button onclick="showSettings()" class="settings-btn group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| | <i class="fas fa-cog mr-3 text-gray-400 group-hover:text-gray-500"></i> |
| | <span class="sidebar-item-text">Configurações</span> |
| | </button> |
| | </div> |
| | </nav> |
| | </div> |
| | <div class="flex-shrink-0 flex border-t border-gray-200 p-4"> |
| | <div class="flex items-center"> |
| | <div> |
| | <img class="inline-block h-9 w-9 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"> |
| | <p id="sidebar-user-name" class="text-sm font-medium text-gray-700">Admin</p> |
| | <p id="sidebar-user-role" class="text-xs font-medium text-gray-500">Administrador</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="main-content" class="main-content content-expanded flex-1 overflow-auto bg-gray-50"> |
| | |
| | <div id="dashboard-content" class="p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2> |
| | <div class="flex items-center space-x-2"> |
| | <span class="text-sm text-gray-600">Atualizado agora</span> |
| | <button class="p-1 rounded-full text-gray-400 hover:text-gray-500"> |
| | <i class="fas fa-sync-alt"></i> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-sm font-medium text-gray-500">Clientes Ativos</p> |
| | <p class="mt-1 text-3xl font-semibold text-gray-900">24</p> |
| | </div> |
| | <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| | <i class="fas fa-users"></i> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <span class="text-green-600 text-sm font-medium">+12%</span> |
| | <span class="text-gray-500 text-sm ml-2">vs último mês</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-sm font-medium text-gray-500">Agendamentos Hoje</p> |
| | <p class="mt-1 text-3xl font-semibold text-gray-900">8</p> |
| | </div> |
| | <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| | <i class="fas fa-calendar-check"></i> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <span class="text-green-600 text-sm font-medium">+2</span> |
| | <span class="text-gray-500 text-sm ml-2">vs ontem</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-sm font-medium text-gray-500">Mensagens Recebidas</p> |
| | <p class="mt-1 text-3xl font-semibold text-gray-900">156</p> |
| | </div> |
| | <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| | <i class="fas fa-comment-dots"></i> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <span class="text-red-600 text-sm font-medium">-8%</span> |
| | <span class="text-gray-500 text-sm ml-2">vs semana passada</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-sm font-medium text-gray-500">NPS Médio</p> |
| | <p class="mt-1 text-3xl font-semibold text-gray-900">8.2</p> |
| | </div> |
| | <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <span class="text-green-600 text-sm font-medium">+0.4</span> |
| | <span class="text-gray-500 text-sm ml-2">vs mês passado</span> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Atividades Recentes</h3> |
| | <a href="#" class="text-sm font-medium text-primary hover:text-secondary">Ver tudo</a> |
| | </div> |
| | <div class="space-y-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <div class="p-2 rounded-full bg-blue-100 text-blue-600"> |
| | <i class="fas fa-user-plus"></i> |
| | </div> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Novo cliente cadastrado</p> |
| | <p class="text-sm text-gray-500">Empresa XYZ foi cadastrada por João Silva</p> |
| | <p class="text-xs text-gray-400 mt-1">10 minutos atrás</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <div class="p-2 rounded-full bg-green-100 text-green-600"> |
| | <i class="fas fa-calendar-plus"></i> |
| | </div> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Novo agendamento</p> |
| | <p class="text-sm text-gray-500">Visita agendada para 15/06 às 14:30</p> |
| | <p class="text-xs text-gray-400 mt-1">1 hora atrás</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <div class="p-2 rounded-full bg-purple-100 text-purple-600"> |
| | <i class="fas fa-comment"></i> |
| | </div> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Nova mensagem</p> |
| | <p class="text-sm text-gray-500">Cliente ABC enviou uma mensagem via WhatsApp</p> |
| | <p class="text-xs text-gray-400 mt-1">2 horas atrás</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Status do WhatsApp</h3> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| | Conectado |
| | </span> |
| | </div> |
| | <div class="flex items-center justify-center mb-4"> |
| | <div class="qr-code-placeholder"> |
| | <span>QR Code Ativo</span> |
| | </div> |
| | </div> |
| | <div class="text-center"> |
| | <p class="text-sm text-gray-600">Número conectado: +55 11 98765-4321</p> |
| | <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | <i class="fas fa-sync-alt mr-2"></i> Atualizar Conexão |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Desempenho Mensal</h3> |
| | <div class="flex items-center space-x-2"> |
| | <select class="mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"> |
| | <option>Últimos 30 dias</option> |
| | <option>Últimos 90 dias</option> |
| | <option>Este ano</option> |
| | </select> |
| | </div> |
| | </div> |
| | <div class="chart-container"> |
| | <canvas id="performanceChart"></canvas> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="whatsapp-content" class="hidden p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-2xl font-bold text-gray-800">Integração com WhatsApp</h2> |
| | <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> |
| | <i class="fas fa-circle mr-1" style="font-size: 8px;"></i> Conectado |
| | </span> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow p-6 mb-6"> |
| | <div class="md:flex"> |
| | <div class="md:w-1/2 p-6"> |
| | <h3 class="text-lg font-medium text-gray-900 mb-4">Conectar WhatsApp</h3> |
| | <p class="text-sm text-gray-600 mb-6">Escaneie o QR Code abaixo com o WhatsApp no seu celular para conectar o AtendiBot Hub à sua conta.</p> |
| | |
| | <div class="flex items-center justify-center mb-6"> |
| | <div class="qr-code-placeholder"> |
| | <span>QR Code Ativo</span> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center"> |
| | <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | <i class="fas fa-sync-alt mr-2"></i> Gerar Novo QR Code |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="md:w-1/2 p-6 border-t md:border-t-0 md:border-l border-gray-200"> |
| | <h3 class="text-lg font-medium text-gray-900 mb-4">Status da Conexão</h3> |
| | |
| | <div class="mb-6"> |
| | <div class="flex items-center mb-2"> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-2"> |
| | Ativo |
| | </span> |
| | <span class="text-sm font-medium text-gray-900">Conexão WhatsApp</span> |
| | </div> |
| | <p class="text-sm text-gray-600">Conectado como: <span class="font-medium">AtendiBot (11) 98765-4321</span></p> |
| | <p class="text-sm text-gray-600 mt-1">Última conexão: 10/06/2023 14:32</p> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <h4 class="text-sm font-medium text-gray-900 mb-2">Histórico de Conexões</h4> |
| | <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg"> |
| | <table class="min-w-full divide-y divide-gray-300"> |
| | <thead class="bg-gray-50"> |
| | <tr> |
| | <th scope="col" class="py-3 pl-4 pr-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> |
| | <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| | <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Número</th> |
| | </tr> |
| | </thead> |
| | <tbody class="divide-y divide-gray-200 bg-white"> |
| | <tr> |
| | <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500">10/06/2023 14:32</td> |
| | <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| | Conectado |
| | </span> |
| | </td> |
| | <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">(11) 98765-4321</td> |
| | </tr> |
| | <tr> |
| | <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500">08/06/2023 09:15</td> |
| | <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> |
| | Desconectado |
| | </span> |
| | </td> |
| | <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">(11) 98765-4321</td> |
| | </tr> |
| | <tr> |
| | <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500">05/06/2023 16:45</td> |
| | <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| | Conectado |
| | </span> |
| | </td> |
| | <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">(11) 98765-4321</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <h4 class="text-sm font-medium text-gray-900 mb-2">Configurações Avançadas</h4> |
| | <div class="space-y-4"> |
| | <div> |
| | <label for="webhook-url" class="block text-sm font-medium text-gray-700">URL do Webhook n8n</label> |
| | <input type="text" id="webhook-url" name="webhook-url" value="https://api.n8n.example.com/webhook" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | <i class="fas fa-save mr-2"></i> Salvar Configurações |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="clients-content" class="hidden p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-2xl font-bold text-gray-800">Clientes</h2> |
| | <button onclick="showNewClientModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | <i class="fas fa-plus mr-2"></i> Novo Cliente |
| | </button> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow mb-6"> |
| | <div class="p-4 border-b border-gray-200"> |
| | <div class="sm:flex sm:items-center sm:justify-between"> |
| | <div class="sm:w-1/2"> |
| | <div class="relative rounded-md shadow-sm"> |
| | <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 type="text" name="search" id="client-search" class="focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Pesquisar clientes..."> |
| | </div> |
| | </div> |
| | <div class="mt-3 sm:mt-0 sm:ml-4"> |
| | <div class="flex space-x-3"> |
| | <select id="client-filter-status" name="client-filter-status" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md"> |
| | <option value="all">Todos os status</option> |
| | <option value="active">Ativos</option> |
| | <option value="inactive">Inativos</option> |
| | </select> |
| | <select id="client-filter-date" name="client-filter-date" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md"> |
| | <option value="all">Todas as datas</option> |
| | <option value="today">Hoje</option> |
| | <option value="week">Esta semana</option> |
| | <option value="month">Este mês</option> |
| | </select> |
| | </div> |
| | </div> |
| | </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">Nome</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setor</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Atendente</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data Cadastro</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="relative px-6 py-3"> |
| | <span class="sr-only">Ações</span> |
| | </th> |
| | </tr> |
| | </thead> |
| | <tbody class="bg-white divide-y divide-gray-200"> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10"> |
| | <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt=""> |
| | </div> |
| | <div class="ml-4"> |
| | <div class="text-sm font-medium text-gray-900">Empresa ABC</div> |
| | <div class="text-sm text-gray-500">contato@empresaabc.com</div> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">Vendas</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">João Silva</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">15/05/2023</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
| | Ativo |
| | </span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
| | <button onclick="showClientDetails('1')" class="text-primary hover:text-secondary mr-3">Ver</button> |
| | <button onclick="showEditClientModal('1')" class="text-primary hover:text-secondary mr-3">Editar</button> |
| | <button onclick="confirmDeleteClient('1')" class="text-red-600 hover:text-red-900">Excluir</button> |
| | </td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10"> |
| | <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt=""> |
| | </div> |
| | <div class="ml-4"> |
| | <div class="text-sm font-medium text-gray-900">Comércio XYZ</div> |
| | <div class="text-sm text-gray-500">contato@comercioxyz.com</div> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">Suporte</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">Maria Souza</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">22/05/2023</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
| | Ativo |
| | </span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
| | <button onclick="showClientDetails('2')" class="text-primary hover:text-secondary mr-3">Ver</button> |
| | <button onclick="showEditClientModal('2')" class="text-primary hover:text-secondary mr-3">Editar</button> |
| | <button onclick="confirmDeleteClient('2')" class="text-red-600 hover:text-red-900">Excluir</button> |
| | </td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10"> |
| | <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt=""> |
| | </div> |
| | <div class="ml-4"> |
| | <div class="text-sm font-medium text-gray-900">Serviços LTDA</div> |
| | <div class="text-sm text-gray-500">contato@servicosltda.com</div> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">Agendamentos</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">Carlos Oliveira</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">10/06/2023</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> |
| | Pendente |
| | </span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
| | <button onclick="showClientDetails('3')" class="text-primary hover:text-secondary mr-3">Ver</button> |
| | <button onclick="showEditClientModal('3')" class="text-primary hover:text-secondary mr-3">Editar</button> |
| | <button onclick="confirmDeleteClient('3')" class="text-red-600 hover:text-red-900">Excluir</button> |
| | </td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
| | <div class="flex-1 flex justify-between sm:hidden"> |
| | <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
| | Anterior |
| | </a> |
| | <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
| | Próxima |
| | </a> |
| | </div> |
| | <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
| | <div> |
| | <p class="text-sm text-gray-700"> |
| | Mostrando |
| | <span class="font-medium">1</span> |
| | a |
| | <span class="font-medium">3</span> |
| | de |
| | <span class="font-medium">12</span> |
| | resultados |
| | </p> |
| | </div> |
| | <div> |
| | <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
| | <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| | <span class="sr-only">Anterior</span> |
| | <i class="fas fa-chevron-left"></i> |
| | </a> |
| | <a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
| | 1 |
| | </a> |
| | <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
| | 2 |
| | </a> |
| | <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
| | 3 |
| | </a> |
| | <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| | <span class="sr-only">Próxima</span> |
| | <i class="fas fa-chevron-right"></i> |
| | </a> |
| | </nav> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="new-client-modal" class="hidden fixed inset-0 overflow-y-auto z-50"> |
| | <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| | <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| | <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| | </div> |
| | <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| | <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
| | <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| | <div class="sm:flex sm:items-start"> |
| | <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Cadastrar Novo Cliente</h3> |
| | <div class="mt-2"> |
| | <form class="space-y-6"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label for="client-name" class="block text-sm font-medium text-gray-700">Nome da Empresa</label> |
| | <input type="text" id="client-name" name="client-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="client-brand" class="block text-sm font-medium text-gray-700">Nome da Marca</label> |
| | <input type="text" id="client-brand" name="client-brand" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="client-attendant" class="block text-sm font-medium text-gray-700">Nome do Atendente</label> |
| | <input type="text" id="client-attendant" name="client-attendant" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="client-sector" class="block text-sm font-medium text-gray-700">Setor de Atendimento</label> |
| | <select id="client-sector" name="client-sector" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | <option>Vendas</option> |
| | <option>Suporte</option> |
| | <option>Agendamentos</option> |
| | <option>Financeiro</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label for="client-phone" class="block text-sm font-medium text-gray-700">Telefone</label> |
| | <input type="tel" id="client-phone" name="client-phone" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="client-hours" class="block text-sm font-medium text-gray-700">Horário de Atendimento</label> |
| | <input type="text" id="client-hours" name="client-hours" placeholder="Ex: 08h às 18h" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <label for="client-address" class="block text-sm font-medium text-gray-700">Endereço (Google Maps)</label> |
| | <input type="text" id="client-address" name="client-address" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div> |
| | <label for="client-instagram" class="block text-sm font-medium text-gray-700">Instagram</label> |
| | <div class="mt-1 flex rounded-md shadow-sm"> |
| | <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">@</span> |
| | <input type="text" id="client-instagram" name="client-instagram" class="focus:ring-primary focus:border-primary flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"> |
| | </div> |
| | </div> |
| | <div> |
| | <label for="client-facebook" class="block text-sm font-medium text-gray-700">Facebook</label> |
| | <div class="mt-1 flex rounded-md shadow-sm"> |
| | <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">fb.com/</span> |
| | <input type="text" id="client-facebook" name="client-facebook" class="focus:ring-primary focus:border-primary flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"> |
| | </div> |
| | </div> |
| | <div> |
| | <label for="client-whatsapp" class="block text-sm font-medium text-gray-700">WhatsApp</label> |
| | <input type="tel" id="client-whatsapp" name="client-whatsapp" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700">Formas de Pagamento</label> |
| | <div class="mt-2 grid grid-cols-2 md:grid-cols-4 gap-2"> |
| | <div class="flex items-center"> |
| | <input id="payment-pix" name="payment-pix" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-pix" class="ml-2 block text-sm text-gray-700">Pix</label> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="payment-credit" name="payment-credit" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-credit" class="ml-2 block text-sm text-gray-700">Cartão de Crédito</label> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="payment-debit" name="payment-debit" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-debit" class="ml-2 block text-sm text-gray-700">Cartão de Débito</label> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="payment-cash" name="payment-cash" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-cash" class="ml-2 block text-sm text-gray-700">Dinheiro</label> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="payment-boleto" name="payment-boleto" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-boleto" class="ml-2 block text-sm text-gray-700">Boleto</label> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="payment-mercado-pago" name="payment-mercado-pago" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-mercado-pago" class="ml-2 block text-sm text-gray-700">Mercado Pago</label> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="payment-picpay" name="payment-picpay" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> |
| | <label for="payment-picpay" class="ml-2 block text-sm text-gray-700">PicPay</label> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <label for="client-history" class="block text-sm font-medium text-gray-700">História da Empresa</label> |
| | <textarea id="client-history" name="client-history" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"></textarea> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <label for="client-instructions" class="block text-sm font-medium text-gray-700">Instruções para o Agente de IA</label> |
| | <textarea id="client-instructions" name="client-instructions" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"></textarea> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700">Logotipo</label> |
| | <div class="mt-1 flex items-center"> |
| | <div class="logo-upload" onclick="document.getElementById('client-logo').click()"> |
| | <input type="file" id="client-logo" name="client-logo" accept=".jpg,.jpeg,.png" class="hidden" onchange="previewLogo(this)"> |
| | <div id="logo-upload-text"> |
| | <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| | <p class="text-sm text-gray-600">Clique para fazer upload</p> |
| | <p class="text-xs text-gray-500">Formatos: JPG, PNG (max. 5MB)</p> |
| | </div> |
| | <img id="logo-preview" class="logo-preview" src="#" alt="Pré-visualização do logotipo" style="display: none;"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </form> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| | <button type="button" onclick="saveNewClient()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm"> |
| | Salvar Cliente |
| | </button> |
| | <button type="button" onclick="hideNewClientModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| | Cancelar |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="client-details-modal" class="hidden fixed inset-0 overflow-y-auto z-50"> |
| | <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| | <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| | <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| | </div> |
| | <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| | <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
| | <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| | <div class="sm:flex sm:items-start"> |
| | <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Detalhes do Cliente</h3> |
| | <button onclick="hideClientDetailsModal()" class="text-gray-400 hover:text-gray-500"> |
| | <i class="fas fa-times"></i> |
| | </button> |
| | </div> |
| | <div class="mt-2"> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| | <div class="md:col-span-1"> |
| | <div class="flex flex-col items-center"> |
| | <img id="client-details-logo" src="https://via.placeholder.com/150" alt="Logo" class="h-32 w-32 rounded-full object-cover mb-4"> |
| | <h4 id="client-details-name" class="text-xl font-bold text-gray-900">Empresa ABC</h4> |
| | <p id="client-details-brand" class="text-sm text-gray-600">Marca XYZ</p> |
| | <div id="client-details-status" class="mt-2 px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| | Ativo |
| | </div> |
| | </div> |
| | <div class="mt-6"> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Contatos</h5> |
| | <div class="space-y-2"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-phone-alt text-gray-400 mr-2"></i> |
| | <span id="client-details-phone" class="text-sm text-gray-700">(11) 98765-4321</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fab fa-whatsapp text-green-500 mr-2"></i> |
| | <span id="client-details-whatsapp" class="text-sm text-gray-700">(11) 98765-4321</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-envelope text-gray-400 mr-2"></i> |
| | <span id="client-details-email" class="text-sm text-gray-700">contato@empresaabc.com</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-6"> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Redes Sociais</h5> |
| | <div class="space-y-2"> |
| | <div class="flex items-center"> |
| | <i class="fab fa-instagram text-purple-600 mr-2"></i> |
| | <span id="client-details-instagram" class="text-sm text-gray-700">@empresaabc</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fab fa-facebook text-blue-600 mr-2"></i> |
| | <span id="client-details-facebook" class="text-sm text-gray-700">fb.com/empresaabc</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Atendente</h5> |
| | <p id="client-details-attendant" class="text-sm text-gray-900">João Silva</p> |
| | </div> |
| | <div> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Setor</h5> |
| | <p id="client-details-sector" class="text-sm text-gray-900">Vendas</p> |
| | </div> |
| | <div> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Horário de Atendimento</h5> |
| | <p id="client-details-hours" class="text-sm text-gray-900">08h às 18h</p> |
| | </div> |
| | <div> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Data de Cadastro</h5> |
| | <p id="client-details-date" class="text-sm text-gray-900">15/05/2023</p> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Endereço</h5> |
| | <p id="client-details-address" class="text-sm text-gray-900">Rua Exemplo, 123 - Centro, São Paulo - SP</p> |
| | <a href="#" class="text-sm text-primary hover:text-secondary mt-1 inline-block">Ver no Google Maps</a> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Formas de Pagamento</h5> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Pix</span> |
| | <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Cartão de Crédito</span> |
| | <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Cartão de Débito</span> |
| | <span class="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Dinheiro</span> |
| | </div> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">História da Empresa</h5> |
| | <p id="client-details-history" class="text-sm text-gray-900">Fundada em 2010, a Empresa ABC se destaca no mercado por sua excelência no atendimento ao cliente e qualidade dos produtos oferecidos.</p> |
| | </div> |
| | <div class="md:col-span-2"> |
| | <h5 class="text-sm font-medium text-gray-500 mb-2">Instruções para o Agente de IA</h5> |
| | <p id="client-details-instructions" class="text-sm text-gray-900">Sempre mencionar os benefícios dos produtos e oferecer desconto para compras acima de R$ 500,00.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| | <button type="button" onclick="hideClientDetailsModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm"> |
| | Fechar |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="scheduling-content" class="hidden p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-2xl font-bold text-gray-800">Agendamentos</h2> |
| | <button onclick="showNewScheduleModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> |
| | <i class="fas fa-plus mr-2"></i> Novo Agendamento |
| | </button> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow mb-6"> |
| | <div class="p-4 border-b border-gray-200"> |
| | <div class="sm:flex sm:items-center sm:justify-between"> |
| | <div class="sm:w-1/2"> |
| | <div class="relative rounded-md shadow-sm"> |
| | <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 type="text" name="search" id="schedule-search" class="focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Pesquisar agendamentos..."> |
| | </div> |
| | </div> |
| | <div class="mt-3 sm:mt-0 sm:ml-4"> |
| | <div class="flex space-x-3"> |
| | <select id="schedule-filter-date" name="schedule-filter-date" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md"> |
| | <option value="today">Hoje</option> |
| | <option value="week">Esta semana</option> |
| | <option value="month">Este mês</option> |
| | <option value="all">Todos</option> |
| | </select> |
| | <select id="schedule-filter-status" name="schedule-filter-status" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md"> |
| | <option value="all">Todos os status</option> |
| | <option value="confirmed">Confirmados</option> |
| | <option value="pending">Pendentes</option> |
| | <option value="canceled">Cancelados</option> |
| | </select> |
| | </div> |
| | </div> |
| | </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">Data</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Horário</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Atendente</th> |
| | <th |
| | </html> |
