Hugging Face's logo

Spaces:
FabioSimao
/
og-dashboard
Running

App Files Community
FabioSimao commited on
Commit
5d6423b
·
verified ·
1 Parent(s): 16f8b61

Prompt para Cockpit Acionável – Olive Garden Brasil

Browse files

Crie um cockpit de liderança de uma página, claro e prático, para uso diário pela equipe executiva da Olive Garden Brasil. Este cockpit deve servir para orientar decisões, não apenas mostrar dados. Use o painel administrativo como referência visual para estrutura, gráficos e métricas.

Estrutura sugerida – 4 caixas principais para cada dia:

Top 3 prioridades do dia/semana

Principais pessoas ou unidades a contatar ou acompanhar

Maiores bloqueios ou gargalos atuais

Vitórias recentes ou resultados positivos que mostram progresso

Métricas e dados a incluir nos gráficos e painéis auxiliares:

Ocupação por loja / unidade

Ticket médio

Margem de lucro bruta e líquida

Número de clientes recorrentes (base própria)

Volume de leads captados via cashback, TagMe e Red Onion

Tempo de resposta no atendimento via WhatsApp IA

Feedback / NPS dos clientes recentes

Comparativo de performance (semana a semana)

Funcionalidades acionáveis:

Alertas automáticos para bloqueios: se ocupação cai abaixo de X%, ou tempo de espera acima de Y minutos

Recomendação de upsells / pratos de maior margem com base em mix de vendas da semana passada

Notificações sobre concorrência: preço, promoções ou avaliações que mudaram substancialmente

Disparos de mensagens via WhatsApp ou e-mail segmentadas para segmentos identificados que apresentam oportunidade (ex: clientes que não visitam há 30 dias; frequentadores de almoço corporativo; etc.)

Design e usabilidade:

Uma única página sem scroll vertical extenso

Visual limpo, com uso de cor para alertas (vermelho para bloqueios, verde para vitórias)

Espaços fixos para “prioridades / vitórias” que mudam com frequência, gráficos que atualizam automaticamente com dados mais recentes

Interface mobile-friendly para que gestores possam consultar rápido pelo smartphone

Objetivo do cockpit:

Criar clareza diária sobre onde concentrar esforços

Facilitar decisões rápidas (ajustes de equipe, promoções de prato, comunicação de urgência)

Aumentar responsabilização e visibilidade das ações internas

Gerar cultura de acompanhamento e execução contínua - Initial Deployment

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +449 -18
  3. prompts.txt +61 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Og Dashboard
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: og-dashboard
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,450 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </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>Olive Garden Brasil - Cockpit Executivo</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ .priority-card:hover {
13
+ transform: translateY(-2px);
14
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
15
+ }
16
+ .alert-pulse {
17
+ animation: pulse 2s infinite;
18
+ }
19
+ @keyframes pulse {
20
+ 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
21
+ 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
22
+ 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="font-inter bg-gray-50">
27
+ <div class="container mx-auto px-4 py-6 max-w-7xl">
28
+ <!-- Header -->
29
+ <header class="flex justify-between items-center mb-8">
30
+ <div class="flex items-center">
31
+ <img src="http://static.photos/food/200x200/42" alt="Olive Garden Logo" class="h-12 w-12 rounded-full mr-3">
32
+ <h1 class="text-2xl font-bold text-gray-800">Cockpit Executivo</h1>
33
+ </div>
34
+ <div class="flex items-center space-x-4">
35
+ <span class="text-sm font-medium text-gray-600">Atualizado: <span id="current-date" class="font-semibold"></span></span>
36
+ <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
37
+ <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> Atualizar
38
+ </button>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Main Dashboard Grid -->
43
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
44
+ <!-- Priority Box -->
45
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500">
46
+ <div class="flex items-center justify-between mb-4">
47
+ <h2 class="text-lg font-semibold text-gray-800">Top 3 Prioridades</h2>
48
+ <i data-feather="target" class="text-blue-500"></i>
49
+ </div>
50
+ <ul class="space-y-4">
51
+ <li class="priority-card bg-blue-50 p-4 rounded-lg transition-all duration-200">
52
+ <div class="flex items-start">
53
+ <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">1</span>
54
+ <div>
55
+ <h3 class="font-medium text-gray-800">Aumentar ticket médio no jantar</h3>
56
+ <p class="text-sm text-gray-600 mt-1">Implementar sugestões de vinhos com pratos principais</p>
57
+ </div>
58
+ </div>
59
+ </li>
60
+ <li class="priority-card bg-blue-50 p-4 rounded-lg transition-all duration-200">
61
+ <div class="flex items-start">
62
+ <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">2</span>
63
+ <div>
64
+ <h3 class="font-medium text-gray-800">Reduzir tempo de espera</h3>
65
+ <p class="text-sm text-gray-600 mt-1">Otimizar escala de funcionários nos horários de pico</p>
66
+ </div>
67
+ </div>
68
+ </li>
69
+ <li class="priority-card bg-blue-50 p-4 rounded-lg transition-all duration-200">
70
+ <div class="flex items-start">
71
+ <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">3</span>
72
+ <div>
73
+ <h3 class="font-medium text-gray-800">Campanha de retenção</h3>
74
+ <p class="text-sm text-gray-600 mt-1">Contatar clientes que não visitam há 30+ dias</p>
75
+ </div>
76
+ </div>
77
+ </li>
78
+ </ul>
79
+ </div>
80
+
81
+ <!-- Contacts Box -->
82
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500">
83
+ <div class="flex items-center justify-between mb-4">
84
+ <h2 class="text-lg font-semibold text-gray-800">Pessoas/Unidades</h2>
85
+ <i data-feather="users" class="text-purple-500"></i>
86
+ </div>
87
+ <div class="space-y-4">
88
+ <div class="flex items-center p-3 hover:bg-purple-50 rounded-lg transition-colors">
89
+ <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full mr-3">
90
+ <div>
91
+ <h3 class="font-medium text-gray-800">Unidade Morumbi</h3>
92
+ <p class="text-sm text-gray-600">Ocupação caiu 15% vs semana passada</p>
93
+ </div>
94
+ </div>
95
+ <div class="flex items-center p-3 hover:bg-purple-50 rounded-lg transition-colors">
96
+ <img src="http://static.photos/people/200x200/2" class="w-10 h-10 rounded-full mr-3">
97
+ <div>
98
+ <h3 class="font-medium text-gray-800">Gerente Regional SP</h3>
99
+ <p class="text-sm text-gray-600">Revisar escalas para fim de semana</p>
100
+ </div>
101
+ </div>
102
+ <div class="flex items-center p-3 hover:bg-purple-50 rounded-lg transition-colors">
103
+ <img src="http://static.photos/people/200x200/3" class="w-10 h-10 rounded-full mr-3">
104
+ <div>
105
+ <h3 class="font-medium text-gray-800">Marketing</h3>
106
+ <p class="text-sm text-gray-600">Aprovar campanha de cashback</p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <button class="mt-4 w-full bg-purple-100 hover:bg-purple-200 text-purple-700 py-2 rounded-lg text-sm font-medium flex items-center justify-center">
111
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i> Adicionar contato
112
+ </button>
113
+ </div>
114
+
115
+ <!-- Blockers Box -->
116
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-red-500">
117
+ <div class="flex items-center justify-between mb-4">
118
+ <h2 class="text-lg font-semibold text-gray-800">Bloqueios/Gargalos</h2>
119
+ <i data-feather="alert-triangle" class="text-red-500"></i>
120
+ </div>
121
+ <div class="space-y-4">
122
+ <div class="alert-pulse bg-red-50 p-4 rounded-lg border border-red-200">
123
+ <div class="flex items-start">
124
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">!</span>
125
+ <div>
126
+ <h3 class="font-medium text-gray-800">Tempo de espera alto</h3>
127
+ <p class="text-sm text-gray-600 mt-1">Média de 25min no almoço (meta: 15min)</p>
128
+ <button class="mt-2 text-xs bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">Ação urgente</button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <div class="bg-red-50 p-4 rounded-lg">
133
+ <div class="flex items-start">
134
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">!</span>
135
+ <div>
136
+ <h3 class="font-medium text-gray-800">Estoque limitado</h3>
137
+ <p class="text-sm text-gray-600 mt-1">Vinho Casa Silva esgotando em 3 unidades</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="bg-red-50 p-4 rounded-lg">
142
+ <div class="flex items-start">
143
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">!</span>
144
+ <div>
145
+ <h3 class="font-medium text-gray-800">Concorrência</h3>
146
+ <p class="text-sm text-gray-600 mt-1">Outback lançou promoção de vinhos</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Wins Box -->
154
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500">
155
+ <div class="flex items-center justify-between mb-4">
156
+ <h2 class="text-lg font-semibold text-gray-800">Vitórias Recentes</h2>
157
+ <i data-feather="award" class="text-green-500"></i>
158
+ </div>
159
+ <div class="space-y-4">
160
+ <div class="bg-green-50 p-4 rounded-lg">
161
+ <div class="flex items-start">
162
+ <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">↑</span>
163
+ <div>
164
+ <h3 class="font-medium text-gray-800">NPS +8pts</h3>
165
+ <p class="text-sm text-gray-600 mt-1">Melhoria no atendimento via WhatsApp</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ <div class="bg-green-50 p-4 rounded-lg">
170
+ <div class="flex items-start">
171
+ <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">↑</span>
172
+ <div>
173
+ <h3 class="font-medium text-gray-800">Recorde de vendas</h3>
174
+ <p class="text-sm text-gray-600 mt-1">Risoto de camarão +15% vs semana passada</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="bg-green-50 p-4 rounded-lg">
179
+ <div class="flex items-start">
180
+ <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded mr-3">↑</span>
181
+ <div>
182
+ <h3 class="font-medium text-gray-800">Novos clientes</h3>
183
+ <p class="text-sm text-gray-600 mt-1">120 leads via campanha de cashback</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <button class="mt-4 w-full bg-green-100 hover:bg-green-200 text-green-700 py-2 rounded-lg text-sm font-medium flex items-center justify-center">
189
+ <i data-feather="share-2" class="w-4 h-4 mr-2"></i> Compartilhar vitórias
190
+ </button>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Metrics Section -->
195
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
196
+ <!-- Occupancy Chart -->
197
+ <div class="bg-white rounded-xl shadow-md p-6">
198
+ <div class="flex items-center justify-between mb-4">
199
+ <h2 class="text-lg font-semibold text-gray-800">Ocupação por Unidade</h2>
200
+ <div class="flex space-x-2">
201
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">Hoje</button>
202
+ <button class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded">Semana</button>
203
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">Mês</button>
204
+ </div>
205
+ </div>
206
+ <div class="h-64">
207
+ <canvas id="occupancyChart"></canvas>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Average Ticket Chart -->
212
+ <div class="bg-white rounded-xl shadow-md p-6">
213
+ <div class="flex items-center justify-between mb-4">
214
+ <h2 class="text-lg font-semibold text-gray-800">Ticket Médio & Margens</h2>
215
+ <div class="text-sm">
216
+ <span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-1"></span>
217
+ <span class="text-gray-600 mr-3">Ticket</span>
218
+ <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-1"></span>
219
+ <span class="text-gray-600">Margem</span>
220
+ </div>
221
+ </div>
222
+ <div class="h-64">
223
+ <canvas id="ticketChart"></canvas>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Bottom Metrics -->
229
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
230
+ <!-- Customer Metrics -->
231
+ <div class="bg-white rounded-xl shadow-md p-6">
232
+ <div class="flex items-center justify-between mb-4">
233
+ <h2 class="text-lg font-semibold text-gray-800">Clientes</h2>
234
+ <i data-feather="user" class="text-indigo-500"></i>
235
+ </div>
236
+ <div class="space-y-4">
237
+ <div>
238
+ <p class="text-sm text-gray-600">Recorrentes</p>
239
+ <p class="text-2xl font-bold text-indigo-600">1,248 <span class="text-sm text-green-500">(+5%)</span></p>
240
+ </div>
241
+ <div>
242
+ <p class="text-sm text-gray-600">Novos (últimos 7 dias)</p>
243
+ <p class="text-2xl font-bold text-indigo-600">342 <span class="text-sm text-green-500">(+12%)</span></p>
244
+ </div>
245
+ <div>
246
+ <p class="text-sm text-gray-600">Inativos (30+ dias)</p>
247
+ <p class="text-2xl font-bold text-indigo-600">587 <span class="text-sm text-red-500">(-3%)</span></p>
248
+ </div>
249
+ </div>
250
+ <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium">
251
+ Disparar campanha
252
+ </button>
253
+ </div>
254
+
255
+ <!-- Lead Sources -->
256
+ <div class="bg-white rounded-xl shadow-md p-6">
257
+ <div class="flex items-center justify-between mb-4">
258
+ <h2 class="text-lg font-semibold text-gray-800">Captação de Leads</h2>
259
+ <i data-feather="bar-chart-2" class="text-amber-500"></i>
260
+ </div>
261
+ <div class="h-48">
262
+ <canvas id="leadsChart"></canvas>
263
+ </div>
264
+ <div class="mt-4 grid grid-cols-3 gap-2 text-center">
265
+ <div>
266
+ <p class="text-xs text-gray-600">Cashback</p>
267
+ <p class="font-medium text-amber-600">45%</p>
268
+ </div>
269
+ <div>
270
+ <p class="text-xs text-gray-600">TagMe</p>
271
+ <p class="font-medium text-amber-600">32%</p>
272
+ </div>
273
+ <div>
274
+ <p class="text-xs text-gray-600">Red Onion</p>
275
+ <p class="font-medium text-amber-600">23%</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Service Metrics -->
281
+ <div class="bg-white rounded-xl shadow-md p-6">
282
+ <div class="flex items-center justify-between mb-4">
283
+ <h2 class="text-lg font-semibold text-gray-800">Atendimento</h2>
284
+ <i data-feather="message-square" class="text-emerald-500"></i>
285
+ </div>
286
+ <div class="space-y-4">
287
+ <div>
288
+ <p class="text-sm text-gray-600">Tempo de resposta (WhatsApp)</p>
289
+ <p class="text-2xl font-bold text-emerald-600">2.4min <span class="text-sm text-green-500">(-0.8min)</span></p>
290
+ </div>
291
+ <div>
292
+ <p class="text-sm text-gray-600">NPS</p>
293
+ <p class="text-2xl font-bold text-emerald-600">78 <span class="text-sm text-green-500">(+8)</span></p>
294
+ </div>
295
+ <div>
296
+ <p class="text-sm text-gray-600">Reclamações</p>
297
+ <p class="text-2xl font-bold text-emerald-600">14 <span class="text-sm text-red-500">(+3)</span></p>
298
+ </div>
299
+ </div>
300
+ <button class="mt-4 w-full bg-emerald-600 hover:bg-emerald-700 text-white py-2 rounded-lg text-sm font-medium">
301
+ Ver detalhes
302
+ </button>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Upsell Recommendations -->
307
+ <div class="mt-6 bg-white rounded-xl shadow-md p-6">
308
+ <div class="flex items-center justify-between mb-4">
309
+ <h2 class="text-lg font-semibold text-gray-800">Recomendações de Upsell</h2>
310
+ <i data-feather="shopping-bag" class="text-rose-500"></i>
311
+ </div>
312
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
313
+ <div class="text-center p-3 hover:bg-rose-50 rounded-lg transition-colors">
314
+ <img src="http://static.photos/food/120x120/1" class="w-16 h-16 rounded-full mx-auto mb-2">
315
+ <p class="font-medium text-gray-800">Risoto de Camarão</p>
316
+ <p class="text-xs text-gray-600">Margem: 62%</p>
317
+ <p class="text-xs text-green-600">+15% vendas</p>
318
+ </div>
319
+ <div class="text-center p-3 hover:bg-rose-50 rounded-lg transition-colors">
320
+ <img src="http://static.photos/food/120x120/2" class="w-16 h-16 rounded-full mx-auto mb-2">
321
+ <p class="font-medium text-gray-800">Vinho Casa Silva</p>
322
+ <p class="text-xs text-gray-600">Margem: 58%</p>
323
+ <p class="text-xs text-green-600">+22% vendas</p>
324
+ </div>
325
+ <div class="text-center p-3 hover:bg-rose-50 rounded-lg transition-colors">
326
+ <img src="http://static.photos/food/120x120/3" class="w-16 h-16 rounded-full mx-auto mb-2">
327
+ <p class="font-medium text-gray-800">Sobremesa Tiramisu</p>
328
+ <p class="text-xs text-gray-600">Margem: 68%</p>
329
+ <p class="text-xs text-red-600">-5% vendas</p>
330
+ </div>
331
+ <div class="text-center p-3 hover:bg-rose-50 rounded-lg transition-colors">
332
+ <img src="http://static.photos/food/120x120/4" class="w-16 h-16 rounded-full mx-auto mb-2">
333
+ <p class="font-medium text-gray-800">Entrada Bruschetta</p>
334
+ <p class="text-xs text-gray-600">Margem: 72%</p>
335
+ <p class="text-xs text-green-600">+8% vendas</p>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <script>
342
+ // Set current date
343
+ const now = new Date();
344
+ document.getElementById('current-date').textContent = now.toLocaleDateString('pt-BR');
345
+
346
+ // Charts
347
+ const occupancyCtx = document.getElementById('occupancyChart').getContext('2d');
348
+ const occupancyChart = new Chart(occupancyCtx, {
349
+ type: 'bar',
350
+ data: {
351
+ labels: ['Morumbi', 'Iguatemi', 'JK', 'Barra', 'Moema'],
352
+ datasets: [{
353
+ label: 'Ocupação (%)',
354
+ data: [65, 72, 58, 81, 68],
355
+ backgroundColor: [
356
+ 'rgba(99, 102, 241, 0.7)',
357
+ 'rgba(99, 102, 241, 0.7)',
358
+ 'rgba(99, 102, 241, 0.7)',
359
+ 'rgba(99, 102, 241, 0.7)',
360
+ 'rgba(99, 102, 241, 0.7)'
361
+ ],
362
+ borderColor: [
363
+ 'rgba(99, 102, 241, 1)',
364
+ 'rgba(99, 102, 241, 1)',
365
+ 'rgba(99, 102, 241, 1)',
366
+ 'rgba(99, 102, 241, 1)',
367
+ 'rgba(99, 102, 241, 1)'
368
+ ],
369
+ borderWidth: 1
370
+ }]
371
+ },
372
+ options: {
373
+ responsive: true,
374
+ maintainAspectRatio: false,
375
+ scales: {
376
+ y: {
377
+ beginAtZero: true,
378
+ max: 100
379
+ }
380
+ }
381
+ }
382
+ });
383
+
384
+ const ticketCtx = document.getElementById('ticketChart').getContext('2d');
385
+ const ticketChart = new Chart(ticketCtx, {
386
+ type: 'line',
387
+ data: {
388
+ labels: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
389
+ datasets: [
390
+ {
391
+ label: 'Ticket Médio (R$)',
392
+ data: [78, 82, 75, 89, 95, 110, 98],
393
+ borderColor: 'rgba(59, 130, 246, 1)',
394
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
395
+ tension: 0.3,
396
+ fill: true
397
+ },
398
+ {
399
+ label: 'Margem (%)',
400
+ data: [52, 54, 50, 56, 58, 60, 55],
401
+ borderColor: 'rgba(16, 185, 129, 1)',
402
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
403
+ tension: 0.3,
404
+ fill: true
405
+ }
406
+ ]
407
+ },
408
+ options: {
409
+ responsive: true,
410
+ maintainAspectRatio: false,
411
+ scales: {
412
+ y: {
413
+ beginAtZero: false
414
+ }
415
+ }
416
+ }
417
+ });
418
+
419
+ const leadsCtx = document.getElementById('leadsChart').getContext('2d');
420
+ const leadsChart = new Chart(leadsCtx, {
421
+ type: 'doughnut',
422
+ data: {
423
+ labels: ['Cashback', 'TagMe', 'Red Onion'],
424
+ datasets: [{
425
+ data: [45, 32, 23],
426
+ backgroundColor: [
427
+ 'rgba(245, 158, 11, 0.7)',
428
+ 'rgba(217, 119, 6, 0.7)',
429
+ 'rgba(180, 83, 9, 0.7)'
430
+ ],
431
+ borderColor: [
432
+ 'rgba(245, 158, 11, 1)',
433
+ 'rgba(217, 119, 6, 1)',
434
+ 'rgba(180, 83, 9, 1)'
435
+ ],
436
+ borderWidth: 1
437
+ }]
438
+ },
439
+ options: {
440
+ responsive: true,
441
+ maintainAspectRatio: false,
442
+ cutout: '70%'
443
+ }
444
+ });
445
+
446
+ // Feather Icons
447
+ feather.replace();
448
+ </script>
449
+ </body>
450
  </html>
prompts.txt ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Prompt para Cockpit Acionável – Olive Garden Brasil
2
+
3
+ Crie um cockpit de liderança de uma página, claro e prático, para uso diário pela equipe executiva da Olive Garden Brasil. Este cockpit deve servir para orientar decisões, não apenas mostrar dados. Use o painel administrativo como referência visual para estrutura, gráficos e métricas.
4
+
5
+ Estrutura sugerida – 4 caixas principais para cada dia:
6
+
7
+ Top 3 prioridades do dia/semana
8
+
9
+ Principais pessoas ou unidades a contatar ou acompanhar
10
+
11
+ Maiores bloqueios ou gargalos atuais
12
+
13
+ Vitórias recentes ou resultados positivos que mostram progresso
14
+
15
+ Métricas e dados a incluir nos gráficos e painéis auxiliares:
16
+
17
+ Ocupação por loja / unidade
18
+
19
+ Ticket médio
20
+
21
+ Margem de lucro bruta e líquida
22
+
23
+ Número de clientes recorrentes (base própria)
24
+
25
+ Volume de leads captados via cashback, TagMe e Red Onion
26
+
27
+ Tempo de resposta no atendimento via WhatsApp IA
28
+
29
+ Feedback / NPS dos clientes recentes
30
+
31
+ Comparativo de performance (semana a semana)
32
+
33
+ Funcionalidades acionáveis:
34
+
35
+ Alertas automáticos para bloqueios: se ocupação cai abaixo de X%, ou tempo de espera acima de Y minutos
36
+
37
+ Recomendação de upsells / pratos de maior margem com base em mix de vendas da semana passada
38
+
39
+ Notificações sobre concorrência: preço, promoções ou avaliações que mudaram substancialmente
40
+
41
+ Disparos de mensagens via WhatsApp ou e-mail segmentadas para segmentos identificados que apresentam oportunidade (ex: clientes que não visitam há 30 dias; frequentadores de almoço corporativo; etc.)
42
+
43
+ Design e usabilidade:
44
+
45
+ Uma única página sem scroll vertical extenso
46
+
47
+ Visual limpo, com uso de cor para alertas (vermelho para bloqueios, verde para vitórias)
48
+
49
+ Espaços fixos para “prioridades / vitórias” que mudam com frequência, gráficos que atualizam automaticamente com dados mais recentes
50
+
51
+ Interface mobile-friendly para que gestores possam consultar rápido pelo smartphone
52
+
53
+ Objetivo do cockpit:
54
+
55
+ Criar clareza diária sobre onde concentrar esforços
56
+
57
+ Facilitar decisões rápidas (ajustes de equipe, promoções de prato, comunicação de urgência)
58
+
59
+ Aumentar responsabilização e visibilidade das ações internas
60
+
61
+ Gerar cultura de acompanhamento e execução contínua