Hugging Face's logo

Spaces:
cleber2
/
anaai
Running

App Files Community
cleber2 commited on
Commit
d80a38d
·
verified ·
1 Parent(s): d2dd8cb

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +1080 -38
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,41 +1,1083 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cleber2/anaai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AtendiBot Hub - Painel Administrativo</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#2563eb',
15
+ secondary: '#1e40af',
16
+ accent: '#3b82f6',
17
+ dark: '#1f2937',
18
+ light: '#f9fafb'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
  <style>
25
+ .sidebar {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .sidebar-collapsed {
29
+ width: 70px;
30
+ }
31
+ .sidebar-expanded {
32
+ width: 250px;
33
+ }
34
+ .main-content {
35
+ transition: margin-left 0.3s ease;
36
+ }
37
+ .content-expanded {
38
+ margin-left: 250px;
39
+ }
40
+ .content-collapsed {
41
+ margin-left: 70px;
42
+ }
43
+ .chart-container {
44
+ height: 300px;
45
+ }
46
+ .qr-code-placeholder {
47
+ width: 200px;
48
+ height: 200px;
49
+ background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 10px, #d1d5db 10px, #d1d5db 20px);
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ color: #6b7280;
54
+ }
55
+ .logo-upload {
56
+ border: 2px dashed #d1d5db;
57
+ border-radius: 0.5rem;
58
+ padding: 1rem;
59
+ text-align: center;
60
+ cursor: pointer;
61
+ }
62
+ .logo-upload:hover {
63
+ border-color: #3b82f6;
64
+ }
65
+ .logo-preview {
66
+ max-width: 150px;
67
+ max-height: 150px;
68
+ display: none;
69
+ }
70
+ .nps-scale {
71
+ display: flex;
72
+ justify-content: space-between;
73
+ margin-top: 1rem;
74
+ }
75
+ .nps-option {
76
+ width: 30px;
77
+ height: 30px;
78
+ border-radius: 50%;
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ cursor: pointer;
83
+ font-size: 0.8rem;
84
+ font-weight: bold;
85
+ }
86
+ .nps-option:hover {
87
+ transform: scale(1.1);
88
+ }
89
+ .selected {
90
+ background-color: #3b82f6;
91
+ color: white;
92
+ }
93
  </style>
94
+ </head>
95
+ <body class="bg-gray-50">
96
+ <!-- Login Screen (Initial State) -->
97
+ <div id="login-screen" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-50">
98
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
99
+ <div class="text-center mb-8">
100
+ <h1 class="text-3xl font-bold text-primary">AtendiBot Hub</h1>
101
+ <p class="text-gray-600 mt-2">Painel Administrativo</p>
102
+ </div>
103
+ <form id="login-form" class="space-y-6">
104
+ <div>
105
+ <label for="email" class="block text-sm font-medium text-gray-700">E-mail</label>
106
+ <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">
107
+ </div>
108
+ <div>
109
+ <label for="password" class="block text-sm font-medium text-gray-700">Senha</label>
110
+ <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">
111
+ </div>
112
+ <div class="flex items-center justify-between">
113
+ <div class="flex items-center">
114
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
115
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Lembrar-me</label>
116
+ </div>
117
+ <div class="text-sm">
118
+ <a href="#" class="font-medium text-primary hover:text-secondary" onclick="showForgotPassword()">Esqueceu sua senha?</a>
119
+ </div>
120
+ </div>
121
+ <div>
122
+ <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">
123
+ Entrar
124
+ </button>
125
+ </div>
126
+ </form>
127
+ <div class="mt-6 text-center text-sm">
128
+ <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>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Forgot Password Modal -->
134
+ <div id="forgot-password-modal" class="hidden fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-50">
135
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
136
+ <div class="text-center mb-6">
137
+ <h2 class="text-2xl font-bold text-primary">Redefinir Senha</h2>
138
+ <p class="text-gray-600 mt-2">Digite seu e-mail para receber o link de redefinição</p>
139
+ </div>
140
+ <form class="space-y-6">
141
+ <div>
142
+ <label for="reset-email" class="block text-sm font-medium text-gray-700">E-mail</label>
143
+ <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">
144
+ </div>
145
+ <div class="flex space-x-4">
146
+ <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">
147
+ Cancelar
148
+ </button>
149
+ <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">
150
+ Enviar Link
151
+ </button>
152
+ </div>
153
+ </form>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Register Modal -->
158
+ <div id="register-modal" class="hidden fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-50">
159
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md overflow-y-auto" style="max-height: 90vh;">
160
+ <div class="text-center mb-6">
161
+ <h2 class="text-2xl font-bold text-primary">Cadastro de Usuário</h2>
162
+ <p class="text-gray-600 mt-2">Preencha os campos abaixo para criar sua conta</p>
163
+ </div>
164
+ <form class="space-y-6">
165
+ <div>
166
+ <label for="register-name" class="block text-sm font-medium text-gray-700">Nome Completo</label>
167
+ <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">
168
+ </div>
169
+ <div>
170
+ <label for="register-email" class="block text-sm font-medium text-gray-700">E-mail</label>
171
+ <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">
172
+ </div>
173
+ <div>
174
+ <label for="register-password" class="block text-sm font-medium text-gray-700">Senha</label>
175
+ <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">
176
+ </div>
177
+ <div>
178
+ <label for="register-confirm-password" class="block text-sm font-medium text-gray-700">Confirmar Senha</label>
179
+ <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">
180
+ </div>
181
+ <div>
182
+ <label for="register-role" class="block text-sm font-medium text-gray-700">Função</label>
183
+ <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">
184
+ <option value="consultor">Consultor</option>
185
+ <option value="operador">Operador</option>
186
+ <option value="administrador">Administrador</option>
187
+ </select>
188
+ </div>
189
+ <div class="flex space-x-4">
190
+ <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">
191
+ Cancelar
192
+ </button>
193
+ <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">
194
+ Cadastrar
195
+ </button>
196
+ </div>
197
+ </form>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Main App Layout (Hidden Initially) -->
202
+ <div id="app-layout" class="hidden h-screen flex flex-col">
203
+ <!-- Top Navigation -->
204
+ <nav class="bg-white shadow-sm">
205
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
206
+ <div class="flex justify-between h-16">
207
+ <div class="flex items-center">
208
+ <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
209
+ <i class="fas fa-bars"></i>
210
+ </button>
211
+ <div class="ml-4 flex items-center">
212
+ <h1 class="text-xl font-bold text-primary">AtendiBot Hub</h1>
213
+ </div>
214
+ </div>
215
+ <div class="flex items-center">
216
+ <div class="ml-4 flex items-center md:ml-6">
217
+ <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">
218
+ <span class="sr-only">Notificações</span>
219
+ <i class="fas fa-bell"></i>
220
+ </button>
221
+ <div class="ml-3 relative">
222
+ <div>
223
+ <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">
224
+ <span class="sr-only">Abrir menu do usuário</span>
225
+ <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="">
226
+ </button>
227
+ </div>
228
+ <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">
229
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Seu perfil</a>
230
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Configurações</a>
231
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" onclick="logout()">Sair</a>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </nav>
239
+
240
+ <!-- Main Content -->
241
+ <div class="flex flex-1 overflow-hidden">
242
+ <!-- Sidebar -->
243
+ <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-md flex flex-col">
244
+ <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
245
+ <div class="flex items-center justify-center px-4 mb-8">
246
+ <div class="text-primary font-bold text-xl">
247
+ <i class="fas fa-robot mr-2"></i>
248
+ <span id="sidebar-logo-text">AtendiBot</span>
249
+ </div>
250
+ </div>
251
+ <nav class="flex-1 px-2 space-y-1">
252
+ <div>
253
+ <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">
254
+ <i class="fas fa-tachometer-alt mr-3 text-primary"></i>
255
+ <span class="sidebar-item-text">Dashboard</span>
256
+ </button>
257
+ </div>
258
+ <div>
259
+ <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">
260
+ <i class="fab fa-whatsapp mr-3 text-gray-400 group-hover:text-gray-500"></i>
261
+ <span class="sidebar-item-text">WhatsApp</span>
262
+ </button>
263
+ </div>
264
+ <div>
265
+ <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">
266
+ <i class="fas fa-users mr-3 text-gray-400 group-hover:text-gray-500"></i>
267
+ <span class="sidebar-item-text">Clientes</span>
268
+ </button>
269
+ </div>
270
+ <div>
271
+ <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">
272
+ <i class="fas fa-calendar-alt mr-3 text-gray-400 group-hover:text-gray-500"></i>
273
+ <span class="sidebar-item-text">Agendamentos</span>
274
+ </button>
275
+ </div>
276
+ <div>
277
+ <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">
278
+ <i class="fas fa-user-tie mr-3 text-gray-400 group-hover:text-gray-500"></i>
279
+ <span class="sidebar-item-text">Colaboradores</span>
280
+ </button>
281
+ </div>
282
+ <div>
283
+ <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">
284
+ <i class="fas fa-wallet mr-3 text-gray-400 group-hover:text-gray-500"></i>
285
+ <span class="sidebar-item-text">Financeiro</span>
286
+ </button>
287
+ </div>
288
+ <div>
289
+ <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">
290
+ <i class="fas fa-star mr-3 text-gray-400 group-hover:text-gray-500"></i>
291
+ <span class="sidebar-item-text">Feedback</span>
292
+ </button>
293
+ </div>
294
+ <div class="pt-4">
295
+ <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">
296
+ <i class="fas fa-cog mr-3 text-gray-400 group-hover:text-gray-500"></i>
297
+ <span class="sidebar-item-text">Configurações</span>
298
+ </button>
299
+ </div>
300
+ </nav>
301
+ </div>
302
+ <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
303
+ <div class="flex items-center">
304
+ <div>
305
+ <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="">
306
+ </div>
307
+ <div class="ml-3">
308
+ <p id="sidebar-user-name" class="text-sm font-medium text-gray-700">Admin</p>
309
+ <p id="sidebar-user-role" class="text-xs font-medium text-gray-500">Administrador</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Main Content Area -->
316
+ <div id="main-content" class="main-content content-expanded flex-1 overflow-auto bg-gray-50">
317
+ <!-- Dashboard Content -->
318
+ <div id="dashboard-content" class="p-6">
319
+ <div class="flex justify-between items-center mb-6">
320
+ <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2>
321
+ <div class="flex items-center space-x-2">
322
+ <span class="text-sm text-gray-600">Atualizado agora</span>
323
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500">
324
+ <i class="fas fa-sync-alt"></i>
325
+ </button>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
330
+ <div class="bg-white rounded-lg shadow p-6">
331
+ <div class="flex items-center justify-between">
332
+ <div>
333
+ <p class="text-sm font-medium text-gray-500">Clientes Ativos</p>
334
+ <p class="mt-1 text-3xl font-semibold text-gray-900">24</p>
335
+ </div>
336
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
337
+ <i class="fas fa-users"></i>
338
+ </div>
339
+ </div>
340
+ <div class="mt-4">
341
+ <span class="text-green-600 text-sm font-medium">+12%</span>
342
+ <span class="text-gray-500 text-sm ml-2">vs último mês</span>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="bg-white rounded-lg shadow p-6">
347
+ <div class="flex items-center justify-between">
348
+ <div>
349
+ <p class="text-sm font-medium text-gray-500">Agendamentos Hoje</p>
350
+ <p class="mt-1 text-3xl font-semibold text-gray-900">8</p>
351
+ </div>
352
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
353
+ <i class="fas fa-calendar-check"></i>
354
+ </div>
355
+ </div>
356
+ <div class="mt-4">
357
+ <span class="text-green-600 text-sm font-medium">+2</span>
358
+ <span class="text-gray-500 text-sm ml-2">vs ontem</span>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="bg-white rounded-lg shadow p-6">
363
+ <div class="flex items-center justify-between">
364
+ <div>
365
+ <p class="text-sm font-medium text-gray-500">Mensagens Recebidas</p>
366
+ <p class="mt-1 text-3xl font-semibold text-gray-900">156</p>
367
+ </div>
368
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
369
+ <i class="fas fa-comment-dots"></i>
370
+ </div>
371
+ </div>
372
+ <div class="mt-4">
373
+ <span class="text-red-600 text-sm font-medium">-8%</span>
374
+ <span class="text-gray-500 text-sm ml-2">vs semana passada</span>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="bg-white rounded-lg shadow p-6">
379
+ <div class="flex items-center justify-between">
380
+ <div>
381
+ <p class="text-sm font-medium text-gray-500">NPS Médio</p>
382
+ <p class="mt-1 text-3xl font-semibold text-gray-900">8.2</p>
383
+ </div>
384
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
385
+ <i class="fas fa-star"></i>
386
+ </div>
387
+ </div>
388
+ <div class="mt-4">
389
+ <span class="text-green-600 text-sm font-medium">+0.4</span>
390
+ <span class="text-gray-500 text-sm ml-2">vs mês passado</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
396
+ <div class="bg-white rounded-lg shadow p-6">
397
+ <div class="flex justify-between items-center mb-4">
398
+ <h3 class="text-lg font-medium text-gray-900">Atividades Recentes</h3>
399
+ <a href="#" class="text-sm font-medium text-primary hover:text-secondary">Ver tudo</a>
400
+ </div>
401
+ <div class="space-y-4">
402
+ <div class="flex items-start">
403
+ <div class="flex-shrink-0">
404
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
405
+ <i class="fas fa-user-plus"></i>
406
+ </div>
407
+ </div>
408
+ <div class="ml-3">
409
+ <p class="text-sm font-medium text-gray-900">Novo cliente cadastrado</p>
410
+ <p class="text-sm text-gray-500">Empresa XYZ foi cadastrada por João Silva</p>
411
+ <p class="text-xs text-gray-400 mt-1">10 minutos atrás</p>
412
+ </div>
413
+ </div>
414
+ <div class="flex items-start">
415
+ <div class="flex-shrink-0">
416
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
417
+ <i class="fas fa-calendar-plus"></i>
418
+ </div>
419
+ </div>
420
+ <div class="ml-3">
421
+ <p class="text-sm font-medium text-gray-900">Novo agendamento</p>
422
+ <p class="text-sm text-gray-500">Visita agendada para 15/06 às 14:30</p>
423
+ <p class="text-xs text-gray-400 mt-1">1 hora atrás</p>
424
+ </div>
425
+ </div>
426
+ <div class="flex items-start">
427
+ <div class="flex-shrink-0">
428
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
429
+ <i class="fas fa-comment"></i>
430
+ </div>
431
+ </div>
432
+ <div class="ml-3">
433
+ <p class="text-sm font-medium text-gray-900">Nova mensagem</p>
434
+ <p class="text-sm text-gray-500">Cliente ABC enviou uma mensagem via WhatsApp</p>
435
+ <p class="text-xs text-gray-400 mt-1">2 horas atrás</p>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="bg-white rounded-lg shadow p-6">
442
+ <div class="flex justify-between items-center mb-4">
443
+ <h3 class="text-lg font-medium text-gray-900">Status do WhatsApp</h3>
444
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
445
+ Conectado
446
+ </span>
447
+ </div>
448
+ <div class="flex items-center justify-center mb-4">
449
+ <div class="qr-code-placeholder">
450
+ <span>QR Code Ativo</span>
451
+ </div>
452
+ </div>
453
+ <div class="text-center">
454
+ <p class="text-sm text-gray-600">Número conectado: +55 11 98765-4321</p>
455
+ <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">
456
+ <i class="fas fa-sync-alt mr-2"></i> Atualizar Conexão
457
+ </button>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="bg-white rounded-lg shadow p-6">
463
+ <div class="flex justify-between items-center mb-4">
464
+ <h3 class="text-lg font-medium text-gray-900">Desempenho Mensal</h3>
465
+ <div class="flex items-center space-x-2">
466
+ <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">
467
+ <option>Últimos 30 dias</option>
468
+ <option>Últimos 90 dias</option>
469
+ <option>Este ano</option>
470
+ </select>
471
+ </div>
472
+ </div>
473
+ <div class="chart-container">
474
+ <canvas id="performanceChart"></canvas>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- WhatsApp Integration Content -->
480
+ <div id="whatsapp-content" class="hidden p-6">
481
+ <div class="flex justify-between items-center mb-6">
482
+ <h2 class="text-2xl font-bold text-gray-800">Integração com WhatsApp</h2>
483
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
484
+ <i class="fas fa-circle mr-1" style="font-size: 8px;"></i> Conectado
485
+ </span>
486
+ </div>
487
+
488
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
489
+ <div class="md:flex">
490
+ <div class="md:w-1/2 p-6">
491
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Conectar WhatsApp</h3>
492
+ <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>
493
+
494
+ <div class="flex items-center justify-center mb-6">
495
+ <div class="qr-code-placeholder">
496
+ <span>QR Code Ativo</span>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="text-center">
501
+ <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">
502
+ <i class="fas fa-sync-alt mr-2"></i> Gerar Novo QR Code
503
+ </button>
504
+ </div>
505
+ </div>
506
+
507
+ <div class="md:w-1/2 p-6 border-t md:border-t-0 md:border-l border-gray-200">
508
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Status da Conexão</h3>
509
+
510
+ <div class="mb-6">
511
+ <div class="flex items-center mb-2">
512
+ <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">
513
+ Ativo
514
+ </span>
515
+ <span class="text-sm font-medium text-gray-900">Conexão WhatsApp</span>
516
+ </div>
517
+ <p class="text-sm text-gray-600">Conectado como: <span class="font-medium">AtendiBot (11) 98765-4321</span></p>
518
+ <p class="text-sm text-gray-600 mt-1">Última conexão: 10/06/2023 14:32</p>
519
+ </div>
520
+
521
+ <div class="mb-6">
522
+ <h4 class="text-sm font-medium text-gray-900 mb-2">Histórico de Conexões</h4>
523
+ <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
524
+ <table class="min-w-full divide-y divide-gray-300">
525
+ <thead class="bg-gray-50">
526
+ <tr>
527
+ <th scope="col" class="py-3 pl-4 pr-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
528
+ <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
529
+ <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Número</th>
530
+ </tr>
531
+ </thead>
532
+ <tbody class="divide-y divide-gray-200 bg-white">
533
+ <tr>
534
+ <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500">10/06/2023 14:32</td>
535
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
536
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
537
+ Conectado
538
+ </span>
539
+ </td>
540
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">(11) 98765-4321</td>
541
+ </tr>
542
+ <tr>
543
+ <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500">08/06/2023 09:15</td>
544
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
545
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
546
+ Desconectado
547
+ </span>
548
+ </td>
549
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">(11) 98765-4321</td>
550
+ </tr>
551
+ <tr>
552
+ <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500">05/06/2023 16:45</td>
553
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
554
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
555
+ Conectado
556
+ </span>
557
+ </td>
558
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">(11) 98765-4321</td>
559
+ </tr>
560
+ </tbody>
561
+ </table>
562
+ </div>
563
+ </div>
564
+
565
+ <div>
566
+ <h4 class="text-sm font-medium text-gray-900 mb-2">Configurações Avançadas</h4>
567
+ <div class="space-y-4">
568
+ <div>
569
+ <label for="webhook-url" class="block text-sm font-medium text-gray-700">URL do Webhook n8n</label>
570
+ <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">
571
+ </div>
572
+ <div>
573
+ <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">
574
+ <i class="fas fa-save mr-2"></i> Salvar Configurações
575
+ </button>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <!-- Clients Content -->
585
+ <div id="clients-content" class="hidden p-6">
586
+ <div class="flex justify-between items-center mb-6">
587
+ <h2 class="text-2xl font-bold text-gray-800">Clientes</h2>
588
+ <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">
589
+ <i class="fas fa-plus mr-2"></i> Novo Cliente
590
+ </button>
591
+ </div>
592
+
593
+ <div class="bg-white rounded-lg shadow mb-6">
594
+ <div class="p-4 border-b border-gray-200">
595
+ <div class="sm:flex sm:items-center sm:justify-between">
596
+ <div class="sm:w-1/2">
597
+ <div class="relative rounded-md shadow-sm">
598
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
599
+ <i class="fas fa-search text-gray-400"></i>
600
+ </div>
601
+ <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...">
602
+ </div>
603
+ </div>
604
+ <div class="mt-3 sm:mt-0 sm:ml-4">
605
+ <div class="flex space-x-3">
606
+ <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">
607
+ <option value="all">Todos os status</option>
608
+ <option value="active">Ativos</option>
609
+ <option value="inactive">Inativos</option>
610
+ </select>
611
+ <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">
612
+ <option value="all">Todas as datas</option>
613
+ <option value="today">Hoje</option>
614
+ <option value="week">Esta semana</option>
615
+ <option value="month">Este mês</option>
616
+ </select>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ <div class="overflow-x-auto">
622
+ <table class="min-w-full divide-y divide-gray-200">
623
+ <thead class="bg-gray-50">
624
+ <tr>
625
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
626
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setor</th>
627
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Atendente</th>
628
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data Cadastro</th>
629
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
630
+ <th scope="col" class="relative px-6 py-3">
631
+ <span class="sr-only">Ações</span>
632
+ </th>
633
+ </tr>
634
+ </thead>
635
+ <tbody class="bg-white divide-y divide-gray-200">
636
+ <tr>
637
+ <td class="px-6 py-4 whitespace-nowrap">
638
+ <div class="flex items-center">
639
+ <div class="flex-shrink-0 h-10 w-10">
640
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt="">
641
+ </div>
642
+ <div class="ml-4">
643
+ <div class="text-sm font-medium text-gray-900">Empresa ABC</div>
644
+ <div class="text-sm text-gray-500">contato@empresaabc.com</div>
645
+ </div>
646
+ </div>
647
+ </td>
648
+ <td class="px-6 py-4 whitespace-nowrap">
649
+ <div class="text-sm text-gray-900">Vendas</div>
650
+ </td>
651
+ <td class="px-6 py-4 whitespace-nowrap">
652
+ <div class="text-sm text-gray-900">João Silva</div>
653
+ </td>
654
+ <td class="px-6 py-4 whitespace-nowrap">
655
+ <div class="text-sm text-gray-900">15/05/2023</div>
656
+ </td>
657
+ <td class="px-6 py-4 whitespace-nowrap">
658
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
659
+ Ativo
660
+ </span>
661
+ </td>
662
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
663
+ <button onclick="showClientDetails('1')" class="text-primary hover:text-secondary mr-3">Ver</button>
664
+ <button onclick="showEditClientModal('1')" class="text-primary hover:text-secondary mr-3">Editar</button>
665
+ <button onclick="confirmDeleteClient('1')" class="text-red-600 hover:text-red-900">Excluir</button>
666
+ </td>
667
+ </tr>
668
+ <tr>
669
+ <td class="px-6 py-4 whitespace-nowrap">
670
+ <div class="flex items-center">
671
+ <div class="flex-shrink-0 h-10 w-10">
672
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt="">
673
+ </div>
674
+ <div class="ml-4">
675
+ <div class="text-sm font-medium text-gray-900">Comércio XYZ</div>
676
+ <div class="text-sm text-gray-500">contato@comercioxyz.com</div>
677
+ </div>
678
+ </div>
679
+ </td>
680
+ <td class="px-6 py-4 whitespace-nowrap">
681
+ <div class="text-sm text-gray-900">Suporte</div>
682
+ </td>
683
+ <td class="px-6 py-4 whitespace-nowrap">
684
+ <div class="text-sm text-gray-900">Maria Souza</div>
685
+ </td>
686
+ <td class="px-6 py-4 whitespace-nowrap">
687
+ <div class="text-sm text-gray-900">22/05/2023</div>
688
+ </td>
689
+ <td class="px-6 py-4 whitespace-nowrap">
690
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
691
+ Ativo
692
+ </span>
693
+ </td>
694
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
695
+ <button onclick="showClientDetails('2')" class="text-primary hover:text-secondary mr-3">Ver</button>
696
+ <button onclick="showEditClientModal('2')" class="text-primary hover:text-secondary mr-3">Editar</button>
697
+ <button onclick="confirmDeleteClient('2')" class="text-red-600 hover:text-red-900">Excluir</button>
698
+ </td>
699
+ </tr>
700
+ <tr>
701
+ <td class="px-6 py-4 whitespace-nowrap">
702
+ <div class="flex items-center">
703
+ <div class="flex-shrink-0 h-10 w-10">
704
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt="">
705
+ </div>
706
+ <div class="ml-4">
707
+ <div class="text-sm font-medium text-gray-900">Serviços LTDA</div>
708
+ <div class="text-sm text-gray-500">contato@servicosltda.com</div>
709
+ </div>
710
+ </div>
711
+ </td>
712
+ <td class="px-6 py-4 whitespace-nowrap">
713
+ <div class="text-sm text-gray-900">Agendamentos</div>
714
+ </td>
715
+ <td class="px-6 py-4 whitespace-nowrap">
716
+ <div class="text-sm text-gray-900">Carlos Oliveira</div>
717
+ </td>
718
+ <td class="px-6 py-4 whitespace-nowrap">
719
+ <div class="text-sm text-gray-900">10/06/2023</div>
720
+ </td>
721
+ <td class="px-6 py-4 whitespace-nowrap">
722
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
723
+ Pendente
724
+ </span>
725
+ </td>
726
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
727
+ <button onclick="showClientDetails('3')" class="text-primary hover:text-secondary mr-3">Ver</button>
728
+ <button onclick="showEditClientModal('3')" class="text-primary hover:text-secondary mr-3">Editar</button>
729
+ <button onclick="confirmDeleteClient('3')" class="text-red-600 hover:text-red-900">Excluir</button>
730
+ </td>
731
+ </tr>
732
+ </tbody>
733
+ </table>
734
+ </div>
735
+ <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
736
+ <div class="flex-1 flex justify-between sm:hidden">
737
+ <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">
738
+ Anterior
739
+ </a>
740
+ <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">
741
+ Próxima
742
+ </a>
743
+ </div>
744
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
745
+ <div>
746
+ <p class="text-sm text-gray-700">
747
+ Mostrando
748
+ <span class="font-medium">1</span>
749
+ a
750
+ <span class="font-medium">3</span>
751
+ de
752
+ <span class="font-medium">12</span>
753
+ resultados
754
+ </p>
755
+ </div>
756
+ <div>
757
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
758
+ <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">
759
+ <span class="sr-only">Anterior</span>
760
+ <i class="fas fa-chevron-left"></i>
761
+ </a>
762
+ <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">
763
+ 1
764
+ </a>
765
+ <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">
766
+ 2
767
+ </a>
768
+ <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">
769
+ 3
770
+ </a>
771
+ <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">
772
+ <span class="sr-only">Próxima</span>
773
+ <i class="fas fa-chevron-right"></i>
774
+ </a>
775
+ </nav>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+ </div>
781
+
782
+ <!-- New Client Modal -->
783
+ <div id="new-client-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
784
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
785
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
786
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
787
+ </div>
788
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
789
+ <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">
790
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
791
+ <div class="sm:flex sm:items-start">
792
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
793
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Cadastrar Novo Cliente</h3>
794
+ <div class="mt-2">
795
+ <form class="space-y-6">
796
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
797
+ <div>
798
+ <label for="client-name" class="block text-sm font-medium text-gray-700">Nome da Empresa</label>
799
+ <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">
800
+ </div>
801
+ <div>
802
+ <label for="client-brand" class="block text-sm font-medium text-gray-700">Nome da Marca</label>
803
+ <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">
804
+ </div>
805
+ <div>
806
+ <label for="client-attendant" class="block text-sm font-medium text-gray-700">Nome do Atendente</label>
807
+ <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">
808
+ </div>
809
+ <div>
810
+ <label for="client-sector" class="block text-sm font-medium text-gray-700">Setor de Atendimento</label>
811
+ <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">
812
+ <option>Vendas</option>
813
+ <option>Suporte</option>
814
+ <option>Agendamentos</option>
815
+ <option>Financeiro</option>
816
+ </select>
817
+ </div>
818
+ <div>
819
+ <label for="client-phone" class="block text-sm font-medium text-gray-700">Telefone</label>
820
+ <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">
821
+ </div>
822
+ <div>
823
+ <label for="client-hours" class="block text-sm font-medium text-gray-700">Horário de Atendimento</label>
824
+ <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">
825
+ </div>
826
+ <div class="md:col-span-2">
827
+ <label for="client-address" class="block text-sm font-medium text-gray-700">Endereço (Google Maps)</label>
828
+ <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">
829
+ </div>
830
+ <div>
831
+ <label for="client-instagram" class="block text-sm font-medium text-gray-700">Instagram</label>
832
+ <div class="mt-1 flex rounded-md shadow-sm">
833
+ <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>
834
+ <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">
835
+ </div>
836
+ </div>
837
+ <div>
838
+ <label for="client-facebook" class="block text-sm font-medium text-gray-700">Facebook</label>
839
+ <div class="mt-1 flex rounded-md shadow-sm">
840
+ <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>
841
+ <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">
842
+ </div>
843
+ </div>
844
+ <div>
845
+ <label for="client-whatsapp" class="block text-sm font-medium text-gray-700">WhatsApp</label>
846
+ <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">
847
+ </div>
848
+ <div class="md:col-span-2">
849
+ <label class="block text-sm font-medium text-gray-700">Formas de Pagamento</label>
850
+ <div class="mt-2 grid grid-cols-2 md:grid-cols-4 gap-2">
851
+ <div class="flex items-center">
852
+ <input id="payment-pix" name="payment-pix" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
853
+ <label for="payment-pix" class="ml-2 block text-sm text-gray-700">Pix</label>
854
+ </div>
855
+ <div class="flex items-center">
856
+ <input id="payment-credit" name="payment-credit" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
857
+ <label for="payment-credit" class="ml-2 block text-sm text-gray-700">Cartão de Crédito</label>
858
+ </div>
859
+ <div class="flex items-center">
860
+ <input id="payment-debit" name="payment-debit" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
861
+ <label for="payment-debit" class="ml-2 block text-sm text-gray-700">Cartão de Débito</label>
862
+ </div>
863
+ <div class="flex items-center">
864
+ <input id="payment-cash" name="payment-cash" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
865
+ <label for="payment-cash" class="ml-2 block text-sm text-gray-700">Dinheiro</label>
866
+ </div>
867
+ <div class="flex items-center">
868
+ <input id="payment-boleto" name="payment-boleto" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
869
+ <label for="payment-boleto" class="ml-2 block text-sm text-gray-700">Boleto</label>
870
+ </div>
871
+ <div class="flex items-center">
872
+ <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">
873
+ <label for="payment-mercado-pago" class="ml-2 block text-sm text-gray-700">Mercado Pago</label>
874
+ </div>
875
+ <div class="flex items-center">
876
+ <input id="payment-picpay" name="payment-picpay" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
877
+ <label for="payment-picpay" class="ml-2 block text-sm text-gray-700">PicPay</label>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ <div class="md:col-span-2">
882
+ <label for="client-history" class="block text-sm font-medium text-gray-700">História da Empresa</label>
883
+ <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>
884
+ </div>
885
+ <div class="md:col-span-2">
886
+ <label for="client-instructions" class="block text-sm font-medium text-gray-700">Instruções para o Agente de IA</label>
887
+ <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>
888
+ </div>
889
+ <div class="md:col-span-2">
890
+ <label class="block text-sm font-medium text-gray-700">Logotipo</label>
891
+ <div class="mt-1 flex items-center">
892
+ <div class="logo-upload" onclick="document.getElementById('client-logo').click()">
893
+ <input type="file" id="client-logo" name="client-logo" accept=".jpg,.jpeg,.png" class="hidden" onchange="previewLogo(this)">
894
+ <div id="logo-upload-text">
895
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
896
+ <p class="text-sm text-gray-600">Clique para fazer upload</p>
897
+ <p class="text-xs text-gray-500">Formatos: JPG, PNG (max. 5MB)</p>
898
+ </div>
899
+ <img id="logo-preview" class="logo-preview" src="#" alt="Pré-visualização do logotipo" style="display: none;">
900
+ </div>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </form>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ </div>
909
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
910
+ <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">
911
+ Salvar Cliente
912
+ </button>
913
+ <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">
914
+ Cancelar
915
+ </button>
916
+ </div>
917
+ </div>
918
+ </div>
919
+ </div>
920
+
921
+ <!-- Client Details Modal -->
922
+ <div id="client-details-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
923
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
924
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
925
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
926
+ </div>
927
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
928
+ <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">
929
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
930
+ <div class="sm:flex sm:items-start">
931
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
932
+ <div class="flex justify-between items-center mb-4">
933
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Detalhes do Cliente</h3>
934
+ <button onclick="hideClientDetailsModal()" class="text-gray-400 hover:text-gray-500">
935
+ <i class="fas fa-times"></i>
936
+ </button>
937
+ </div>
938
+ <div class="mt-2">
939
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
940
+ <div class="md:col-span-1">
941
+ <div class="flex flex-col items-center">
942
+ <img id="client-details-logo" src="https://via.placeholder.com/150" alt="Logo" class="h-32 w-32 rounded-full object-cover mb-4">
943
+ <h4 id="client-details-name" class="text-xl font-bold text-gray-900">Empresa ABC</h4>
944
+ <p id="client-details-brand" class="text-sm text-gray-600">Marca XYZ</p>
945
+ <div id="client-details-status" class="mt-2 px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
946
+ Ativo
947
+ </div>
948
+ </div>
949
+ <div class="mt-6">
950
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Contatos</h5>
951
+ <div class="space-y-2">
952
+ <div class="flex items-center">
953
+ <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
954
+ <span id="client-details-phone" class="text-sm text-gray-700">(11) 98765-4321</span>
955
+ </div>
956
+ <div class="flex items-center">
957
+ <i class="fab fa-whatsapp text-green-500 mr-2"></i>
958
+ <span id="client-details-whatsapp" class="text-sm text-gray-700">(11) 98765-4321</span>
959
+ </div>
960
+ <div class="flex items-center">
961
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
962
+ <span id="client-details-email" class="text-sm text-gray-700">contato@empresaabc.com</span>
963
+ </div>
964
+ </div>
965
+ </div>
966
+ <div class="mt-6">
967
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Redes Sociais</h5>
968
+ <div class="space-y-2">
969
+ <div class="flex items-center">
970
+ <i class="fab fa-instagram text-purple-600 mr-2"></i>
971
+ <span id="client-details-instagram" class="text-sm text-gray-700">@empresaabc</span>
972
+ </div>
973
+ <div class="flex items-center">
974
+ <i class="fab fa-facebook text-blue-600 mr-2"></i>
975
+ <span id="client-details-facebook" class="text-sm text-gray-700">fb.com/empresaabc</span>
976
+ </div>
977
+ </div>
978
+ </div>
979
+ </div>
980
+ <div class="md:col-span-2">
981
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
982
+ <div>
983
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Atendente</h5>
984
+ <p id="client-details-attendant" class="text-sm text-gray-900">João Silva</p>
985
+ </div>
986
+ <div>
987
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Setor</h5>
988
+ <p id="client-details-sector" class="text-sm text-gray-900">Vendas</p>
989
+ </div>
990
+ <div>
991
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Horário de Atendimento</h5>
992
+ <p id="client-details-hours" class="text-sm text-gray-900">08h às 18h</p>
993
+ </div>
994
+ <div>
995
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Data de Cadastro</h5>
996
+ <p id="client-details-date" class="text-sm text-gray-900">15/05/2023</p>
997
+ </div>
998
+ <div class="md:col-span-2">
999
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Endereço</h5>
1000
+ <p id="client-details-address" class="text-sm text-gray-900">Rua Exemplo, 123 - Centro, São Paulo - SP</p>
1001
+ <a href="#" class="text-sm text-primary hover:text-secondary mt-1 inline-block">Ver no Google Maps</a>
1002
+ </div>
1003
+ <div class="md:col-span-2">
1004
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Formas de Pagamento</h5>
1005
+ <div class="flex flex-wrap gap-2">
1006
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Pix</span>
1007
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Cartão de Crédito</span>
1008
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Cartão de Débito</span>
1009
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Dinheiro</span>
1010
+ </div>
1011
+ </div>
1012
+ <div class="md:col-span-2">
1013
+ <h5 class="text-sm font-medium text-gray-500 mb-2">História da Empresa</h5>
1014
+ <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>
1015
+ </div>
1016
+ <div class="md:col-span-2">
1017
+ <h5 class="text-sm font-medium text-gray-500 mb-2">Instruções para o Agente de IA</h5>
1018
+ <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>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
1028
+ <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">
1029
+ Fechar
1030
+ </button>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <!-- Scheduling Content -->
1037
+ <div id="scheduling-content" class="hidden p-6">
1038
+ <div class="flex justify-between items-center mb-6">
1039
+ <h2 class="text-2xl font-bold text-gray-800">Agendamentos</h2>
1040
+ <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">
1041
+ <i class="fas fa-plus mr-2"></i> Novo Agendamento
1042
+ </button>
1043
+ </div>
1044
+
1045
+ <div class="bg-white rounded-lg shadow mb-6">
1046
+ <div class="p-4 border-b border-gray-200">
1047
+ <div class="sm:flex sm:items-center sm:justify-between">
1048
+ <div class="sm:w-1/2">
1049
+ <div class="relative rounded-md shadow-sm">
1050
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
1051
+ <i class="fas fa-search text-gray-400"></i>
1052
+ </div>
1053
+ <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...">
1054
+ </div>
1055
+ </div>
1056
+ <div class="mt-3 sm:mt-0 sm:ml-4">
1057
+ <div class="flex space-x-3">
1058
+ <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">
1059
+ <option value="today">Hoje</option>
1060
+ <option value="week">Esta semana</option>
1061
+ <option value="month">Este mês</option>
1062
+ <option value="all">Todos</option>
1063
+ </select>
1064
+ <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">
1065
+ <option value="all">Todos os status</option>
1066
+ <option value="confirmed">Confirmados</option>
1067
+ <option value="pending">Pendentes</option>
1068
+ <option value="canceled">Cancelados</option>
1069
+ </select>
1070
+ </div>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+ <div class="overflow-x-auto">
1075
+ <table class="min-w-full divide-y divide-gray-200">
1076
+ <thead class="bg-gray-50">
1077
+ <tr>
1078
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
1079
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
1080
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Horário</th>
1081
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Atendente</th>
1082
+ <th
1083
+ </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Crie um aplicativo administrativo chamado "AtendiBot Hub", com login de usuários e integração com n8n via QR Code do WhatsApp. Funcionalidades: 1. Tela de Login e Cadastro de Usuários - Campos: nome, e-mail, senha - Funções: administrador, operador, consultor - Opção de redefinir senha - Login obrigatório para acessar o sistema 2. Integração com WhatsApp via QR Code - Tela para o usuário escanear o QR Code gerado pelo n8n - Exibir status de conexão (conectado/não conectado) - Salvar número do WhatsApp conectado 3. Menu Clientes (Cadastro de Empresas) - Nome do agente de atendimento - Setor de atendimento (ex: vendas, suporte, agendamentos) - Horários de atendimento (ex: 08h às 18h) - Endereço com campo para Google Maps - Redes sociais (Instagram, Facebook, WhatsApp) - Campo de texto para instruções para o agente de IA - Número de telefone - Campo de texto para história da empresa - Upload de logotipo (.jpg ou .png) - Nome da marca - Campo "Formas de pagamento" com múltiplas opções: [ ] Pix [ ] Cartão de crédito [ ] Cartão de débito [ ] Dinheiro [ ] Boleto bancário [ ] Mercado Pago [ ] PicPay 4. Painel de Clientes - Lista com todos os clientes cadastrados - Filtros por nome, data e status - Visualização rápida do resumo de cada cliente 5. Painel de Agendamentos - Cadastro de visitas com: nome do cliente, data, hora e atendente - Visualização em formato de agenda - Botão "Enviar para n8n" via webhook 6. Painel de Colaboradores - Nome, função, telefone, e-mail - Setor de trabalho - Definição de permissões de acesso 7. Painel Financeiro - Visualização de pagamentos via Pix - Campo para copiar chave Pix - Relatórios de valores pagos, pendentes e totais por cliente - Exportação em Excel (.xls ou .csv) 8. Painel de Feedback - Coleta de avaliações de clientes (NPS 0 a 10) - Campo de comentário aberto - Gráfico com nota média geral e por setor Design: - Interface moderna e minimalista - Ícones para cada seção - Painéis em cards - Estilo clean com cores neutras (tons de cinza, azul, branco) Conexão: - Cada ação (agendamento, cadastro, feedback, pagamento) deve enviar dados para o n8n via Webhook (URL configurável) - Permitir editar URL do webhook em uma seção de configurações avançadas Nome do App: Aanai Hub quero login e senha para o administrador logar e ver todo site quero que possa acessar todo menu