Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AtendiBot Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .menu-item { | |
| justify-content: center; | |
| } | |
| .content-area { | |
| transition: all 0.3s; | |
| } | |
| .content-area.expanded { | |
| margin-left: 70px; | |
| } | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #f7fafc; | |
| } | |
| .dark-mode .card { | |
| background-color: #2d3748; | |
| border-color: #4a5568; | |
| } | |
| .dark-mode .sidebar { | |
| background-color: #2d3748; | |
| } | |
| .dark-mode .navbar { | |
| background-color: #2d3748; | |
| } | |
| .dark-mode .input-field { | |
| background-color: #4a5568; | |
| color: #f7fafc; | |
| border-color: #4a5568; | |
| } | |
| .dark-mode .dropdown-content { | |
| background-color: #2d3748; | |
| } | |
| .qr-container { | |
| width: 250px; | |
| height: 250px; | |
| background-color: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| z-index: 1000; | |
| height: 100vh; | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| } | |
| .content-area { | |
| margin-left: 0 ; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center"> | |
| <i class="fas fa-robot text-2xl mr-2"></i> | |
| <span class="logo-text font-bold text-xl">AtendiBot Hub</span> | |
| </div> | |
| <div class="border-b border-blue-700 mx-4"></div> | |
| <div class="flex-grow overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="mb-2 text-blue-200 uppercase text-xs font-semibold sidebar-text">Menu Principal</div> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('dashboard')"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('whatsapp')"> | |
| <i class="fab fa-whatsapp mr-3"></i> | |
| <span class="sidebar-text">WhatsApp</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('clientes')"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span class="sidebar-text">Clientes</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('agendamentos')"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| <span class="sidebar-text">Agendamentos</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('colaboradores')"> | |
| <i class="fas fa-user-tie mr-3"></i> | |
| <span class="sidebar-text">Colaboradores</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('financeiro')"> | |
| <i class="fas fa-wallet mr-3"></i> | |
| <span class="sidebar-text">Financeiro</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('feedback')"> | |
| <i class="fas fa-comment-alt mr-3"></i> | |
| <span class="sidebar-text">Feedback</span> | |
| </a> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-2 text-blue-200 uppercase text-xs font-semibold sidebar-text">Configurações</div> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="showSection('configuracoes')"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="sidebar-text">Configurações</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="toggleDarkMode()"> | |
| <i class="fas fa-moon mr-3"></i> | |
| <span class="sidebar-text">Modo Escuro</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-blue-700 mb-1" onclick="logout()"> | |
| <i class="fas fa-sign-out-alt mr-3"></i> | |
| <span class="sidebar-text">Sair</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="content-area flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="navbar bg-white shadow-sm flex items-center justify-between p-4"> | |
| <div class="flex items-center"> | |
| <button class="mobile-menu-btn mr-4 text-gray-600 hidden" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800" id="section-title">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <button class="flex items-center focus:outline-none" onclick="toggleDropdown('user-dropdown')"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="hidden md:inline">Admin</span> | |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div id="user-dropdown" class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Meu Perfil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a> | |
| <div class="border-t border-gray-200"></div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="logout()">Sair</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div class="flex-1 overflow-y-auto p-4"> | |
| <!-- Login Section (shown by default) --> | |
| <div id="login-section" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mt-10"> | |
| <div class="p-8"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-robot text-5xl text-blue-600 mb-4"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">AtendiBot Hub</h2> | |
| <p class="text-gray-600">Faça login para acessar o painel</p> | |
| </div> | |
| <form id="login-form"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="email">E-mail</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="seu@email.com"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="password">Senha</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder"pressao"> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800" onclick="showSection('reset-password')">Esqueceu sua senha?</a> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" onclick="login()"> | |
| Entrar | |
| </button> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800" onclick="showSection('register')">Criar conta</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Reset Password Section --> | |
| <div id="reset-password-section" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mt-10 hidden"> | |
| <div class="p-8"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-key text-4xl text-blue-600 mb-4"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">Redefinir Senha</h2> | |
| <p class="text-gray-600">Digite seu e-mail para redefinir sua senha</p> | |
| </div> | |
| <form id="reset-password-form"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="reset-email">E-mail</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="reset-email" type="email" placeholder="seu@email.com"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" onclick="sendResetLink()"> | |
| Enviar Link | |
| </button> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800" onclick="showSection('login')">Voltar para login</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Register Section --> | |
| <div id="register-section" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mt-10 hidden"> | |
| <div class="p-8"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-user-plus text-4xl text-blue-600 mb-4"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">Criar Conta</h2> | |
| <p class="text-gray-600">Preencha os campos para criar sua conta</p> | |
| </div> | |
| <form id="register-form"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="register-name">Nome Completo</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="register-name" type="text" placeholder="Seu nome"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="register-email">E-mail</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="register-email" type="email" placeholder="seu@email.com"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="register-password">Senha</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="register-password" type="password" placeholder="********"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="register-confirm-password">Confirmar Senha</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="register-confirm-password" type="password" placeholder="********"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" onclick="register()"> | |
| Registrar | |
| </button> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800" onclick="showSection('login')">Já tem uma conta?</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Dashboard Section --> | |
| <div id="dashboard-section" class="hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Clientes</p> | |
| <h3 class="text-2xl font-bold">1,245</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Agendamentos</p> | |
| <h3 class="text-2xl font-bold">86</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Mensagens</p> | |
| <h3 class="text-2xl font-bold">324</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4"> | |
| <i class="fas fa-wallet text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Receita</p> | |
| <h3 class="text-2xl font-bold">R$ 24,560</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Atividades Recentes</h3> | |
| <a href="#" class="text-blue-600 text-sm">Ver todas</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-calendar-plus text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Novo agendamento criado</p> | |
| <p class="text-gray-500 text-sm">Cliente: João Silva - 15/06 às 14:30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-user-plus text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Novo cliente cadastrado</p> | |
| <p class="text-gray-500 text-sm">Empresa: Mercado Bom Preço</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> | |
| <i class="fas fa-comment-dots text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Nova mensagem recebida</p> | |
| <p class="text-gray-500 text-sm">WhatsApp: (11) 98765-4321</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Feedback Recente</h3> | |
| <a href="#" class="text-blue-600 text-sm">Ver todos</a> | |
| </div> | |
| <div class="flex items-center justify-center mb-4"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-blue-600">8.7</div> | |
| <div class="text-gray-500">Nota média</div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Atendimento</span> | |
| <span class="text-sm font-medium">9.2</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Qualidade</span> | |
| <span class="text-sm font-medium">8.5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Tempo</span> | |
| <span class="text-sm font-medium">7.9</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- WhatsApp Section --> | |
| <div id="whatsapp-section" class="hidden"> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Integração WhatsApp</h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="whatsapp-webhook">URL do Webhook n8n</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="whatsapp-webhook" type="text" placeholder="{{link_do_fluxo_n8n}}"> | |
| <p class="text-gray-500 text-xs mt-1">Cole aqui o URL do webhook do n8n para integração com WhatsApp</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold mb-2">Status da Conexão</h3> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <span>Não conectado</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold mb-4">Conectar WhatsApp</h3> | |
| <div class="qr-container border border-gray-300 mb-4"> | |
| <p class="text-gray-500">QR Code aparecerá aqui</p> | |
| </div> | |
| <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="generateQRCode()"> | |
| <i class="fab fa-whatsapp mr-2"></i> Gerar QR Code | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">Número Conectado</h3> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="(00) 00000-0000" disabled> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clientes Section --> | |
| <div id="clientes-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Clientes</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="showClientForm()"> | |
| <i class="fas fa-plus mr-2"></i> Novo Cliente | |
| </button> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Nome</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Contato</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercado Bom Preço</td> | |
| <td class="px-6 py-4 border-b border-gray-200">(11) 98765-4321</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <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 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Supermercado Econômico</td> | |
| <td class="px-6 py-4 border-b border-gray-200">(11) 91234-5678</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <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 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercadinho São João</td> | |
| <td class="px-6 py-4 border-b border-gray-200">(11) 99876-5432</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Inativo</span> | |
| </td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Client Form (hidden by default) --> | |
| <div id="client-form-section" class="card bg-white rounded-lg shadow p-6 mb-6 hidden"> | |
| <h3 class="text-lg font-bold mb-4">Cadastrar Novo Cliente</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-name">Nome da Empresa</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-name" type="text" placeholder="Nome da empresa"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-brand">Nome da Marca</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-brand" type="text" placeholder="Nome da marca"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-agent">Agente de Atendimento</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-agent" type="text" placeholder="Nome do agente"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-sector">Setor de Atendimento</label> | |
| <select class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-sector"> | |
| <option value="">Selecione um setor</option> | |
| <option value="vendas">Vendas</option> | |
| <option value="suporte">Suporte</option> | |
| <option value="agendamentos">Agendamentos</option> | |
| <option value="financeiro">Financeiro</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-hours">Horários de Atendimento</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-hours" type="text" placeholder="Ex: 08h às 18h"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-address">Endereço (Google Maps)</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-address" type="text" placeholder="Endereço completo"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2">Redes Sociais</label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Instagram"> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Facebook"> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="WhatsApp"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-phone">Telefone</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-phone" type="text" placeholder="(00) 00000-0000"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-history">História da Empresa</label> | |
| <textarea class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-history" rows="3" placeholder="Conte um pouco sobre a empresa"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-instructions">Instruções para o Agente de IA</label> | |
| <textarea class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-instructions" rows="3" placeholder="Instruções específicas para o atendimento"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2">Formas de Pagamento</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">Pix</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">Cartão de crédito</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">Cartão de débito</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">Dinheiro</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">Boleto bancário</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">Mercado Pago</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2">PicPay</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-logo">Logotipo</label> | |
| <div class="flex items-center"> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-logo" type="file" accept=".jpg,.png"> | |
| </div> | |
| <p class="text-gray-500 text-xs mt-1">Formatos aceitos: .jpg, .png</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="client-webhook">URL do Webhook n8n</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="client-webhook" type="text" placeholder="{{link_do_fluxo_n8n}}"> | |
| <p class="text-gray-500 text-xs mt-1">Cole aqui o URL do webhook do n8n para este cliente</p> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded mr-2 focus:outline-none focus:shadow-outline" type="button" onclick="hideClientForm()"> | |
| Cancelar | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" onclick="saveClient()"> | |
| Salvar Cliente | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Agendamentos Section --> | |
| <div id="agendamentos-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Agendamentos</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="showAppointmentForm()"> | |
| <i class="fas fa-plus mr-2"></i> Novo Agendamento | |
| </button> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex justify-between mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-filter">Filtrar por:</label> | |
| <select class="input-field shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-filter"> | |
| <option value="all">Todos</option> | |
| <option value="today">Hoje</option> | |
| <option value="week">Esta semana</option> | |
| <option value="month">Este mês</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-search">Pesquisar:</label> | |
| <div class="flex"> | |
| <input class="input-field shadow appearance-none border rounded-l py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-search" type="text" placeholder="Nome do cliente"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r focus:outline-none focus:shadow-outline"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Cliente</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Data</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Hora</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Atendente</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercado Bom Preço</td> | |
| <td class="px-6 py-4 border-b border-gray-200">15/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">14:30</td> | |
| <td class="px-6 py-4 border-b border-gray-200">João Silva</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmado</span> | |
| </td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2" title="Editar"><i class="fas fa-edit"></i></button> | |
| <button class="text-green-600 hover:text-green-900 mr-2" title="Enviar para n8n" onclick="sendToN8N('agendamento')"><i class="fas fa-paper-plane"></i></button> | |
| <button class="text-red-600 hover:text-red-900" title="Cancelar"><i class="fas fa-times"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Supermercado Econômico</td> | |
| <td class="px-6 py-4 border-b border-gray-200">16/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">10:00</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Maria Souza</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <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 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2" title="Editar"><i class="fas fa-edit"></i></button> | |
| <button class="text-green-600 hover:text-green-900 mr-2" title="Enviar para n8n" onclick="sendToN8N('agendamento')"><i class="fas fa-paper-plane"></i></button> | |
| <button class="text-red-600 hover:text-red-900" title="Cancelar"><i class="fas fa-times"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercadinho São João</td> | |
| <td class="px-6 py-4 border-b border-gray-200">17/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">16:45</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Carlos Oliveira</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Cancelado</span> | |
| </td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2" title="Editar"><i class="fas fa-edit"></i></button> | |
| <button class="text-green-600 hover:text-green-900 mr-2" title="Enviar para n8n" onclick="sendToN8N('agendamento')"><i class="fas fa-paper-plane"></i></button> | |
| <button class="text-red-600 hover:text-red-900" title="Cancelar"><i class="fas fa-times"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Appointment Form (hidden by default) --> | |
| <div id="appointment-form-section" class="card bg-white rounded-lg shadow p-6 mb-6 hidden"> | |
| <h3 class="text-lg font-bold mb-4">Novo Agendamento</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-client">Cliente</label> | |
| <select class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-client"> | |
| <option value="">Selecione um cliente</option> | |
| <option value="1">Mercado Bom Preço</option> | |
| <option value="2">Supermercado Econômico</option> | |
| <option value="3">Mercadinho São João</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-attendant">Atendente</label> | |
| <select class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-attendant"> | |
| <option value="">Selecione um atendente</option> | |
| <option value="1">João Silva</option> | |
| <option value="2">Maria Souza</option> | |
| <option value="3">Carlos Oliveira</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-date">Data</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-date" type="date"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-time">Hora</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-time" type="time"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-notes">Observações</label> | |
| <textarea class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-notes" rows="3" placeholder="Detalhes sobre o agendamento"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="appointment-webhook">URL do Webhook n8n</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="appointment-webhook" type="text" placeholder="{{link_do_fluxo_n8n}}"> | |
| <p class="text-gray-500 text-xs mt-1">Cole aqui o URL do webhook do n8n para este agendamento</p> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded mr-2 focus:outline-none focus:shadow-outline" type="button" onclick="hideAppointmentForm()"> | |
| Cancelar | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" onclick="saveAppointment()"> | |
| Salvar Agendamento | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Colaboradores Section --> | |
| <div id="colaboradores-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Colaboradores</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="showEmployeeForm()"> | |
| <i class="fas fa-plus mr-2"></i> Novo Colaborador | |
| </button> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Nome</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Função</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Setor</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Contato</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">João Silva</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Atendente</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Vendas</td> | |
| <td class="px-6 py-4 border-b border-gray-200">(11) 98765-4321</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Maria Souza</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Gerente</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Administrativo</td> | |
| <td class="px-6 py-4 border-b border-gray-200">(11) 91234-5678</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">Carlos Oliveira</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Suporte</td> | |
| <td class="px-6 py-4 border-b border-gray-200">TI</td> | |
| <td class="px-6 py-4 border-b border-gray-200">(11) 99876-5432</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Employee Form (hidden by default) --> | |
| <div id="employee-form-section" class="card bg-white rounded-lg shadow p-6 mb-6 hidden"> | |
| <h3 class="text-lg font-bold mb-4">Cadastrar Novo Colaborador</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-name">Nome Completo</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-name" type="text" placeholder="Nome completo"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-email">E-mail</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-email" type="email" placeholder="E-mail"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-phone">Telefone</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-phone" type="text" placeholder="(00) 00000-0000"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-role">Função</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-role" type="text" placeholder="Função"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-department">Setor</label> | |
| <select class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-department"> | |
| <option value="">Selecione um setor</option> | |
| <option value="vendas">Vendas</option> | |
| <option value="suporte">Suporte</option> | |
| <option value="ti">TI</option> | |
| <option value="administrativo">Administrativo</option> | |
| <option value="financeiro">Financeiro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-access">Nível de Acesso</label> | |
| <select class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-access"> | |
| <option value="admin">Administrador</option> | |
| <option value="operator">Operador</option> | |
| <option value="consultant">Consultor</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="employee-webhook">URL do Webhook n8n</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="employee-webhook" type="text" placeholder="{{link_do_fluxo_n8n}}"> | |
| <p class="text-gray-500 text-xs mt-1">Cole aqui o URL do webhook do n8n para este colaborador</p> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded mr-2 focus:outline-none focus:shadow-outline" type="button" onclick="hideEmployeeForm()"> | |
| Cancelar | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" onclick="saveEmployee()"> | |
| Salvar Colaborador | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Financeiro Section --> | |
| <div id="financeiro-section" class="hidden"> | |
| <h2 class="text-xl font-bold mb-6">Financeiro</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Recebido</p> | |
| <h3 class="text-2xl font-bold">R$ 24,560.00</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-hand-holding-usd text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Pendentes</p> | |
| <h3 class="text-2xl font-bold">R$ 3,245.50</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Atrasados</p> | |
| <h3 class="text-2xl font-bold">R$ 1,120.00</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Chave Pix</h3> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="copyPixKey()"> | |
| <i class="fas fa-copy mr-2"></i> Copiar | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="pix-key" type="text" value="123e4567-e89b-12d3-a456-426614174000" readonly> | |
| <p class="text-gray-500 text-xs mt-1">Esta é a chave Pix para recebimentos</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="finance-webhook">URL do Webhook n8n</label> | |
| <input class="input-field shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="finance-webhook" type="text" placeholder="{{link_do_fluxo_n8n}}"> | |
| <p class="text-gray-500 text-xs mt-1">Cole aqui o URL do webhook do n8n para integração financeira</p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Transações Recentes</h3> | |
| <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="exportToExcel()"> | |
| <i class="fas fa-file-excel mr-2"></i> Exportar | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Data</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Cliente</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Valor</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Forma</th> | |
| <th class="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">15/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercado Bom Preço</td> | |
| <td class="px-6 py-4 border-b border-gray-200">R$ 1,250.00</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Pix</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pago</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">14/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Supermercado Econômico</td> | |
| <td class="px-6 py-4 border-b border-gray-200">R$ 980.50</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Cartão</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pago</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">10/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercadinho São João</td> | |
| <td class="px-6 py-4 border-b border-gray-200">R$ 750.00</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Boleto</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pendente</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 border-b border-gray-200">05/06/2023</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Mercado Popular</td> | |
| <td class="px-6 py-4 border-b border-gray-200">R$ 1,200.00</td> | |
| <td class="px-6 py-4 border-b border-gray-200">Pix</td> | |
| <td class="px-6 py-4 border-b border-gray-200"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Atrasado</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feedback Section --> | |
| <div id="feedback-section" class="hidden"> | |
| <h2 class="text-xl font-bold mb-6">Feedback dos Clientes</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">NPS Geral</h3> | |
| <div class="text-3xl font-bold text-blue-600">8.7</div> | |
| </div> | |
| <div class="flex justify-center mb-4"> | |
| <div class="w-32 h-32 rounded-full flex items-center justify-center border-8 border-blue-100"> | |
| <span class="text-4xl font-bold">87%</span> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-600">Nota média dos últimos 30 dias</p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-bold text-lg mb-4">Distribuição de Notas</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <span class="w-8 text-sm font-medium">10</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <span class="w-8 text-right text-sm font-medium">45%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-8 text-sm font-medium">9</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <span class="w-8 text-right text-sm font-medium">30%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-8 text-sm font-medium">8</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| <span class="w-8 text-right text-sm font-medium">15%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-8 text-sm font-medium">7</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-orange-500 h-2 rounded-full" style="width: 7%"></div> | |
| </div> | |
| </div> | |
| <span class="w-8 text-right text-sm font-medium">7%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-8 text-sm font-medium">0-6</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 3%"></div> | |
| </div> | |
| </div> | |
| <span class="w-8 text-right text-sm font-medium">3%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex justify-between items-center | |
| </html> |