Hugging Face's logo

Spaces:
EraDigital
/
arcq-junho
Running

App Files Community
EraDigital commited on
Commit
0fdeb6e
·
verified ·
1 Parent(s): 7cf7b84

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +803 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Arcq Junho
3
- emoji: 🔥
4
- colorFrom: yellow
5
- colorTo: green
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: arcq-junho
3
+ emoji: 🐳
4
+ colorFrom: purple
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,803 @@
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>Análise Financeira - Junho 2025</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .slide-in {
12
+ animation: slideIn 0.5s ease-out forwards;
13
+ }
14
+ @keyframes slideIn {
15
+ from { transform: translateY(20px); opacity: 0; }
16
+ to { transform: translateY(0); opacity: 1; }
17
+ }
18
+ .progress-ring__circle {
19
+ transition: stroke-dashoffset 0.35s;
20
+ transform: rotate(-90deg);
21
+ transform-origin: 50% 50%;
22
+ }
23
+ .tabs-content {
24
+ display: none;
25
+ }
26
+ .tabs-content.active {
27
+ display: block;
28
+ animation: fadeIn 0.3s ease-out;
29
+ }
30
+ @keyframes fadeIn {
31
+ from { opacity: 0; }
32
+ to { opacity: 1; }
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50">
37
+ <div class="container mx-auto px-4 py-8">
38
+ <!-- Header -->
39
+ <header class="mb-8">
40
+ <div class="flex justify-between items-center mb-4">
41
+ <h1 class="text-3xl font-bold text-gray-800">Análise Financeira <span class="text-blue-600">Junho 2025</span></h1>
42
+ <div class="flex items-center space-x-4">
43
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Última atualização: 30/06/2025</span>
44
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
45
+ <i class="fas fa-download mr-2"></i> Exportar PDF
46
+ </button>
47
+ </div>
48
+ </div>
49
+
50
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
51
+ <div class="p-6 flex justify-between items-center">
52
+ <div>
53
+ <h2 class="text-xl font-semibold text-gray-700">Visão Geral do Fluxo de Caixa</h2>
54
+ <p class="text-gray-500">Período: Janeiro 2025 a Dezembro 2025</p>
55
+ </div>
56
+ <div class="flex items-center space-x-2">
57
+ <div class="text-center px-4 py-2 bg-blue-50 rounded-lg">
58
+ <p class="text-sm text-gray-500">Saldo Inicial</p>
59
+ <p class="text-xl font-bold text-blue-600">R$ 57.765</p>
60
+ </div>
61
+ <i class="fas fa-arrow-right text-gray-400"></i>
62
+ <div class="text-center px-4 py-2 bg-red-50 rounded-lg">
63
+ <p class="text-sm text-gray-500">Saldo Final</p>
64
+ <p class="text-xl font-bold text-red-600">R$ 41.057</p>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </header>
70
+
71
+ <!-- Main Dashboard -->
72
+ <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-8">
73
+ <!-- Performance Overview -->
74
+ <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-3 slide-in">
75
+ <div class="flex justify-between items-center mb-4">
76
+ <h2 class="text-xl font-semibold text-gray-700">Desempenho Mensal</h2>
77
+ <div class="relative">
78
+ <select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
79
+ <option>Jan 2025 - Dez 2025</option>
80
+ <option>Últimos 6 meses</option>
81
+ <option>Últimos 3 meses</option>
82
+ </select>
83
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 text-xs"></i>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="h-80">
88
+ <canvas id="performanceChart"></canvas>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- KPI Cards -->
93
+ <div class="space-y-6 lg:col-span-2">
94
+ <div class="grid grid-cols-2 gap-4">
95
+ <!-- Receitas Card -->
96
+ <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.1s;">
97
+ <div class="flex justify-between items-start">
98
+ <div>
99
+ <p class="text-sm text-gray-500 font-medium">Receitas Totais</p>
100
+ <h3 class="text-2xl font-bold mt-1 text-green-600">R$ 42.704</h3>
101
+ </div>
102
+ <div class="bg-green-100 p-3 rounded-lg">
103
+ <i class="fas fa-arrow-up text-green-600"></i>
104
+ </div>
105
+ </div>
106
+ <div class="mt-4">
107
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
108
+ <div class="h-full bg-green-500 rounded-full" style="width: 75%"></div>
109
+ </div>
110
+ <p class="text-xs text-gray-500 mt-2"><span class="font-medium text-green-600">25%↑</span> vs média mensal</p>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Despesas Card -->
115
+ <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.2s;">
116
+ <div class="flex justify-between items-start">
117
+ <div>
118
+ <p class="text-sm text-gray-500 font-medium">Despesas Totais</p>
119
+ <h3 class="text-2xl font-bold mt-1 text-red-600">R$ 44.177</h3>
120
+ </div>
121
+ <div class="bg-red-100 p-3 rounded-lg">
122
+ <i class="fas fa-arrow-up text-red-600"></i>
123
+ </div>
124
+ </div>
125
+ <div class="mt-4">
126
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
127
+ <div class="h-full bg-red-500 rounded-full" style="width: 62%"></div>
128
+ </div>
129
+ <p class="text-xs text-gray-500 mt-2"><span class="font-medium text-red-600">18%↑</span> vs média mensal</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="grid grid-cols-2 gap-4">
135
+ <!-- Lucro Card -->
136
+ <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.3s;">
137
+ <div class="flex justify-between items-start">
138
+ <div>
139
+ <p class="text-sm text-gray-500 font-medium">Resultado Operacional</p>
140
+ <h3 class="text-2xl font-bold mt-1 text-blue-600">R$ 17.981</h3>
141
+ </div>
142
+ <div class="bg-blue-100 p-3 rounded-lg">
143
+ <i class="fas fa-chart-line text-blue-600"></i>
144
+ </div>
145
+ </div>
146
+ <div class="mt-4">
147
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
148
+ <div class="h-full bg-blue-500 rounded-full" style="width: 55%"></div>
149
+ </div>
150
+ <p class="text-xs text-gray-500 mt-2"><span class="font-medium text-blue-600">22%↑</span> vs média mensal</p>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Margem Card -->
155
+ <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.4s;">
156
+ <div class="flex justify-between items-start">
157
+ <div>
158
+ <p class="text-sm text-gray-500 font-medium">Margem de Contribuição</p>
159
+ <h3 class="text-2xl font-bold mt-1 text-purple-600">63,6%</h3>
160
+ </div>
161
+ <div class="bg-purple-100 p-3 rounded-lg">
162
+ <i class="fas fa-percent text-purple-600"></i>
163
+ </div>
164
+ </div>
165
+ <div class="mt-4 flex">
166
+ <div class="relative w-20 h-20">
167
+ <svg class="w-full h-full" viewBox="0 0 36 36">
168
+ <circle class="text-gray-200" stroke-width="3" stroke="currentColor" fill="transparent" r="15" cx="18" cy="18"/>
169
+ <circle class="progress-ring__circle text-purple-500" stroke-width="3" stroke="currentColor" fill="transparent" stroke-dasharray="100, 100" stroke-dashoffset="36.4" r="15" cx="18" cy="18"/>
170
+ </svg>
171
+ <div class="absolute inset-0 flex items-center justify-center text-sm font-bold text-purple-600">63.6%</div>
172
+ </div>
173
+ <div class="ml-3 pt-4">
174
+ <p class="text-xs text-gray-500"><span class="font-medium text-purple-600">5%↑</span> vs último mês</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Revenue Composition -->
183
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in">
184
+ <div class="flex justify-between items-center mb-6">
185
+ <h2 class="text-xl font-semibold text-gray-700">Composição das Receitas</h2>
186
+ <div class="flex space-x-2">
187
+ <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm font-medium">Junho</button>
188
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">Comparativo</button>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
193
+ <div class="h-64">
194
+ <canvas id="revenueCompositionChart"></canvas>
195
+ </div>
196
+ <div>
197
+ <div class="space-y-4">
198
+ <div class="flex items-center justify-between">
199
+ <div class="flex items-center">
200
+ <div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div>
201
+ <span class="text-sm font-medium">Receita de Tráfego</span>
202
+ </div>
203
+ <span class="text-sm font-semibold">R$ 33.561</span>
204
+ </div>
205
+
206
+ <div class="flex items-center justify-between">
207
+ <div class="flex items-center">
208
+ <div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div>
209
+ <span class="text-sm font-medium">Receitas de Web Design</span>
210
+ </div>
211
+ <span class="text-sm font-semibold">R$ 8.596</span>
212
+ </div>
213
+
214
+ <div class="flex items-center justify-between">
215
+ <div class="flex items-center">
216
+ <div class="w-4 h-4 bg-green-500 rounded-full mr-2"></div>
217
+ <span class="text-sm font-medium">Receitas de Serviços</span>
218
+ </div>
219
+ <span class="text-sm font-semibold">R$ 547</span>
220
+ </div>
221
+
222
+ <div class="flex items-center justify-between">
223
+ <div class="flex items-center">
224
+ <div class="w-4 h-4 bg-red-500 rounded-full mr-2"></div>
225
+ <span class="text-sm font-medium">Hospedagem</span>
226
+ </div>
227
+ <span class="text-sm font-semibold">R$ 0</span>
228
+ </div>
229
+
230
+ <div class="pt-4 mt-4 border-t border-gray-200">
231
+ <div class="flex justify-between items-center">
232
+ <span class="font-semibold">Total Receitas</span>
233
+ <span class="font-bold text-lg">R$ 42.704</span>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="mt-4 bg-blue-50 p-4 rounded-lg">
238
+ <div class="flex items-center">
239
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>
240
+ <span class="text-sm font-medium text-gray-700">Receita de tráfego representou 78.6% do total, aumento de 43.7% vs média mensal</span>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Expense Breakdown -->
249
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in">
250
+ <div class="flex justify-between items-center mb-6">
251
+ <h2 class="text-xl font-semibold text-gray-700">Composição das Despesas</h2>
252
+ <div class="flex space-x-2">
253
+ <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm font-medium">Junho</button>
254
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">Comparativo</button>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
259
+ <div class="h-64">
260
+ <canvas id="expenseCompositionChart"></canvas>
261
+ </div>
262
+ <div>
263
+ <div class="space-y-4">
264
+ <div class="flex items-center justify-between">
265
+ <div class="flex items-center">
266
+ <div class="w-4 h-4 bg-purple-500 rounded-full mr-2"></div>
267
+ <span class="text-sm font-medium">PLR</span>
268
+ </div>
269
+ <span class="text-sm font-semibold">R$ 19.396</span>
270
+ </div>
271
+
272
+ <div class="flex items-center justify-between">
273
+ <div class="flex items-center">
274
+ <div class="w-4 h-4 bg-red-500 rounded-full mr-2"></div>
275
+ <span class="text-sm font-medium">Salários e Encargos</span>
276
+ </div>
277
+ <span class="text-sm font-semibold">R$ 4.709</span>
278
+ </div>
279
+
280
+ <div class="flex items-center justify-between">
281
+ <div class="flex items-center">
282
+ <div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div>
283
+ <span class="text-sm font-medium">Custos Variáveis</span>
284
+ </div>
285
+ <span class="text-sm font-semibold">R$ 15.538</span>
286
+ </div>
287
+
288
+ <div class="flex items-center justify-between">
289
+ <div class="flex items-center">
290
+ <div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div>
291
+ <span class="text-sm font-medium">Despesas Administrativas</span>
292
+ </div>
293
+ <span class="text-sm font-semibold">R$ 3.551</span>
294
+ </div>
295
+
296
+ <div class="pt-4 mt-4 border-t border-gray-200">
297
+ <div class="flex justify-between items-center">
298
+ <span class="font-semibold">Total Despesas</span>
299
+ <span class="font-bold text-lg">R$ 44.177</span>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="mt-4 bg-blue-50 p-4 rounded-lg">
304
+ <div class="flex items-center">
305
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>
306
+ <span class="text-sm font-medium text-gray-700">PLR representa 43.9% do total de despesas, aumento de R$ 4.000 vs média mensal</span>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Cash Flow Projection -->
315
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in">
316
+ <div class="flex justify-between items-center mb-6">
317
+ <h2 class="text-xl font-semibold text-gray-700">Projeção do Fluxo de Caixa</h2>
318
+ <div class="flex items-center space-x-2">
319
+ <span class="text-sm text-gray-500">Período:</span>
320
+ <div class="relative">
321
+ <select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
322
+ <option>Jun 2025 - Dez 2025</option>
323
+ <option>Próximos 12 meses</option>
324
+ </select>
325
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 text-xs"></i>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="overflow-x-auto">
331
+ <table class="min-w-full divide-y divide-gray-200">
332
+ <thead class="bg-gray-50">
333
+ <tr>
334
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mês</th>
335
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Saldo Inicial</th>
336
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recebimentos</th>
337
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pagamentos</th>
338
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Resultado</th>
339
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Saldo Final</th>
340
+ </tr>
341
+ </thead>
342
+ <tbody class="bg-white divide-y divide-gray-200">
343
+ <tr>
344
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Jun/25</td>
345
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 42.529</td>
346
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 42.704</td>
347
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 44.177</td>
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 1.473</td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 41.057</td>
350
+ </tr>
351
+ <tr>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Jul/25</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 41.057</td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 33.973</td>
355
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 50.665</td>
356
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 16.692</td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 24.364</td>
358
+ </tr>
359
+ <tr>
360
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Ago/25</td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 24.364</td>
362
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 26.635</td>
363
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 38.928</td>
364
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 12.292</td>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 13.119</td>
366
+ </tr>
367
+ <tr>
368
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Set/25</td>
369
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 13.119</td>
370
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 26.235</td>
371
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 37.173</td>
372
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 10.938</td>
373
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 2.181</td>
374
+ </tr>
375
+ <tr>
376
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Out/25</td>
377
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 2.181</td>
378
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 27.535</td>
379
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 38.794</td>
380
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 11.258</td>
381
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-red-600">-R$ 9.077</td>
382
+ </tr>
383
+ </tbody>
384
+ </table>
385
+ </div>
386
+
387
+ <div class="mt-6 bg-yellow-50 p-4 rounded-lg border border-yellow-200">
388
+ <div class="flex">
389
+ <div class="flex-shrink-0">
390
+ <i class="fas fa-exclamation-triangle text-yellow-500 mt-1"></i>
391
+ </div>
392
+ <div class="ml-3">
393
+ <h3 class="text-sm font-medium text-yellow-800">Atenção!</h3>
394
+ <div class="mt-2 text-sm text-yellow-700">
395
+ <p>Projeção indica saldo negativo a partir de Outubro/2025 (-R$9.077) devido principalmente ao aumento do PLR em Julho. Recomenda-se revisão da política de distribuição de resultados ou aumento de receitas para evitar esse cenário.</p>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Key Insights -->
403
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in">
404
+ <h2 class="text-xl font-semibold text-gray-700 mb-6">Principais Pontos de Atenção</h2>
405
+
406
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
407
+ <!-- Financial Issues -->
408
+ <div class="border-l-4 border-red-500 pl-4">
409
+ <h3 class="font-semibold text-gray-800 mb-2">Desafios Financeiros</h3>
410
+ <ul class="space-y-3">
411
+ <li class="flex items-start">
412
+ <i class="fas fa-circle text-red-500 text-xs mt-1 mr-2"></i>
413
+ <span class="text-sm text-gray-700">PLR aumentou significativamente em Julho (R$27.396 vs média de R$19.396)</span>
414
+ </li>
415
+ <li class="flex items-start">
416
+ <i class="fas fa-circle text-red-500 text-xs mt-1 mr-2"></i>
417
+ <span class="text-sm text-gray-700">Saldo de caixa projetado ficará negativo a partir de Outubro/2025</span>
418
+ </li>
419
+ <li class="flex items-start">
420
+ <i class="fas fa-circle text-red-500 text-xs mt-1 mr-2"></i>
421
+ <span class="text-sm text-gray-700">Custos variáveis acima da média em Junho (R$15.538)</span>
422
+ </li>
423
+ </ul>
424
+ </div>
425
+
426
+ <!-- Recommendations -->
427
+ <div class="border-l-4 border-green-500 pl-4">
428
+ <h3 class="font-semibold text-gray-800 mb-2">Diretrizes Recomendadas</h3>
429
+ <ul class="space-y-3">
430
+ <li class="flex items-start">
431
+ <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i>
432
+ <span class="text-sm text-gray-700">Revisar política de PLR para evitar impacto negativo no fluxo de caixa</span>
433
+ </li>
434
+ <li class="flex items-start">
435
+ <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i>
436
+ <span class="text-sm text-gray-700">Investir em estratégias para aumentar receita de Web Design (em queda)</span>
437
+ </li>
438
+ <li class="flex items-start">
439
+ <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i>
440
+ <span class="text-sm text-gray-700">Controlar custos de remuneração de prestadores de serviço</span>
441
+ </li>
442
+ <li class="flex items-start">
443
+ <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i>
444
+ <span class="text-sm text-gray-700">Manter reserva financeira para meses de saldo negativo projetado</span>
445
+ </li>
446
+ </ul>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Financial Summary -->
451
+ <div class="mt-8 bg-blue-50 p-4 rounded-lg">
452
+ <h3 class="font-semibold text-blue-800 mb-2">Resumo Financeiro</h3>
453
+ <div class="mt-2 text-sm text-blue-700">
454
+ <p>Em junho, a empresa teve um bom desempenho operacional com resultado positivo de R$17.981, porém o fluxo de caixa final foi negativo em R$1.473 devido ao alto PLR distribuído. A margem de contribuição foi excelente (63.6%), mas projeções indicam desafios futuros com saldos negativos a partir de Out/2025. Recomenda-se focar em diversificação de receitas e controle de despesas variáveis para garantir sustentabilidade financeira.</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Tabs Section -->
460
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 slide-in">
461
+ <div class="border-b border-gray-200">
462
+ <nav class="flex -mb-px">
463
+ <button onclick="openTab(event, 'tab1')" class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600">
464
+ Detalhes Receitas
465
+ </button>
466
+ <button onclick="openTab(event, 'tab2')" class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
467
+ Detalhes Despesas
468
+ </button>
469
+ <button onclick="openTab(event, 'tab3')" class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
470
+ PLR
471
+ </button>
472
+ </nav>
473
+ </div>
474
+
475
+ <div id="tab1" class="tabs-content active p-6">
476
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Detalhamento das Receitas</h3>
477
+ <div class="overflow-x-auto">
478
+ <table class="min-w-full divide-y divide-gray-200">
479
+ <thead class="bg-gray-50">
480
+ <tr>
481
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoria</th>
482
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jan</th>
483
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fev</th>
484
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mar</th>
485
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jun</th>
486
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Variação</th>
487
+ </tr>
488
+ </thead>
489
+ <tbody class="bg-white divide-y divide-gray-200">
490
+ <tr>
491
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita de Tráfego</td>
492
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 22.815</td>
493
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 23.843</td>
494
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 25.170</td>
495
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 33.561</td>
496
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+47%</td>
497
+ </tr>
498
+ <tr>
499
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receitas de Web Design</td>
500
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 7.476</td>
501
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.217</td>
502
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.324</td>
503
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 8.596</td>
504
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">-24%</td>
505
+ </tr>
506
+ <tr>
507
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receitas de Serviços</td>
508
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 0</td>
509
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 497</td>
510
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 497</td>
511
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 547</td>
512
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+10%</td>
513
+ </tr>
514
+ </tbody>
515
+ </table>
516
+ </div>
517
+ </div>
518
+
519
+ <div id="tab2" class="tabs-content p-6">
520
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Detalhamento das Despesas</h3>
521
+ <div class="overflow-x-auto">
522
+ <table class="min-w-full divide-y divide-gray-200">
523
+ <thead class="bg-gray-50">
524
+ <tr>
525
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoria</th>
526
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jan</th>
527
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fev</th>
528
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mar</th>
529
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jun</th>
530
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Variação</th>
531
+ </tr>
532
+ </thead>
533
+ <tbody class="bg-white divide-y divide-gray-200">
534
+ <tr>
535
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Custos Variáveis</td>
536
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 6.444</td>
537
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 9.591</td>
538
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.161</td>
539
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 15.538</td>
540
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">+39%</td>
541
+ </tr>
542
+ <tr>
543
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PLR</td>
544
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 19.396</td>
545
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 19.396</td>
546
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 19.396</td>
547
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 19.396</td>
548
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold">0%</td>
549
+ </tr>
550
+ <tr>
551
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Salários</td>
552
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 6.811</td>
553
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 1.105</td>
554
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 6.313</td>
555
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 4.709</td>
556
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">-25%</td>
557
+ </tr>
558
+ </tbody>
559
+ </table>
560
+ </div>
561
+ </div>
562
+
563
+ <div id="tab3" class="tabs-content p-6">
564
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Participação nos Lucros e Resultados (PLR)</h3>
565
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
566
+ <div>
567
+ <div class="bg-purple-50 p-4 rounded-lg mb-4">
568
+ <div class="flex justify-between items-center mb-2">
569
+ <span class="text-sm font-medium text-purple-800">Total PLR Distribuído em Junho</span>
570
+ <span class="text-lg font-bold text-purple-600">R$ 19.396</span>
571
+ </div>
572
+ <div class="h-2 bg-purple-200 rounded-full overflow-hidden">
573
+ <div class="h-full bg-purple-500 rounded-full" style="width: 43.9%"></div>
574
+ </div>
575
+ <p class="text-xs text-purple-600 mt-2">43.9% do total das despesas</p>
576
+ </div>
577
+
578
+ <div class="space-y-3">
579
+ <div class="flex justify-between">
580
+ <span class="text-sm text-gray-600">PLR como % do Lucro Operacional</span>
581
+ <span class="text-sm font-semibold">107.9%</span>
582
+ </div>
583
+ <div class="flex justify-between">
584
+ <span class="text-sm text-gray-600">PLR per capita (3 beneficiários)</span>
585
+ <span class="text-sm font-semibold">R$ 6.465</span>
586
+ </div>
587
+ <div class="flex justify-between">
588
+ <span class="text-sm text-gray-600">Variação vs média mensal</span>
589
+ <span class="text-sm font-semibold">0%</span>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ <div>
594
+ <div class="h-64">
595
+ <canvas id="plrChart"></canvas>
596
+ </div>
597
+ <div class="mt-2 text-sm text-gray-600 text-center">
598
+ <p>Projeção de aumento para R$27.396 em Julho (+41%)</p>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+
606
+ <script>
607
+ // Tab functionality
608
+ function openTab(evt, tabName) {
609
+ var i, tabcontent, tablinks;
610
+
611
+ tabcontent = document.getElementsByClassName("tabs-content");
612
+ for (i = 0; i < tabcontent.length; i++) {
613
+ tabcontent[i].classList.remove("active");
614
+ }
615
+
616
+ tablinks = document.getElementsByClassName("tab-btn");
617
+ for (i = 0; i < tablinks.length; i++) {
618
+ tablinks[i].classList.remove("border-blue-500", "text-blue-600");
619
+ tablinks[i].classList.add("border-transparent", "text-gray-500");
620
+ }
621
+
622
+ document.getElementById(tabName).classList.add("active");
623
+ evt.currentTarget.classList.add("border-blue-500", "text-blue-600");
624
+ evt.currentTarget.classList.remove("border-transparent", "text-gray-500");
625
+ }
626
+
627
+ // Charts
628
+ document.addEventListener('DOMContentLoaded', function() {
629
+ // Performance Chart
630
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
631
+ new Chart(performanceCtx, {
632
+ type: 'line',
633
+ data: {
634
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
635
+ datasets: [
636
+ {
637
+ label: 'Receitas',
638
+ data: [32757, 36279, 37684, 34902, 34148, 42704, 33973, 26635, 26235, 27535, 22588, 21013],
639
+ borderColor: '#10B981',
640
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
641
+ tension: 0.3,
642
+ fill: true
643
+ },
644
+ {
645
+ label: 'Despesas',
646
+ data: [38408, 38022, 41353, 38789, 34435, 44177, 50665, 38928, 37173, 38794, 37568, 34645],
647
+ borderColor: '#EF4444',
648
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
649
+ tension: 0.3,
650
+ fill: true
651
+ }
652
+ ]
653
+ },
654
+ options: {
655
+ responsive: true,
656
+ maintainAspectRatio: false,
657
+ plugins: {
658
+ legend: {
659
+ position: 'top',
660
+ },
661
+ tooltip: {
662
+ callbacks: {
663
+ label: function(context) {
664
+ return context.dataset.label + ': R$ ' + context.raw.toLocaleString('pt-BR');
665
+ }
666
+ }
667
+ }
668
+ },
669
+ scales: {
670
+ y: {
671
+ beginAtZero: false,
672
+ ticks: {
673
+ callback: function(value) {
674
+ return 'R$ ' + value.toLocaleString('pt-BR');
675
+ }
676
+ }
677
+ }
678
+ }
679
+ }
680
+ });
681
+
682
+ // Revenue Composition Chart
683
+ const revenueCtx = document.getElementById('revenueCompositionChart').getContext('2d');
684
+ new Chart(revenueCtx, {
685
+ type: 'doughnut',
686
+ data: {
687
+ labels: ['Receita de Tráfego', 'Web Design', 'Serviços', 'Hospedagem'],
688
+ datasets: [{
689
+ data: [33561, 8596, 547, 0],
690
+ backgroundColor: [
691
+ '#3B82F6',
692
+ '#F59E0B',
693
+ '#10B981',
694
+ '#EF4444'
695
+ ],
696
+ borderWidth: 1
697
+ }]
698
+ },
699
+ options: {
700
+ responsive: true,
701
+ maintainAspectRatio: false,
702
+ plugins: {
703
+ legend: {
704
+ position: 'right',
705
+ },
706
+ tooltip: {
707
+ callbacks: {
708
+ label: function(context) {
709
+ const label = context.label || '';
710
+ const value = context.raw || 0;
711
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
712
+ const percentage = Math.round((value / total) * 100);
713
+ return `${label}: R$ ${value.toLocaleString('pt-BR')} (${percentage}%)`;
714
+ }
715
+ }
716
+ }
717
+ }
718
+ }
719
+ });
720
+
721
+ // Expense Composition Chart
722
+ const expenseCtx = document.getElementById('expenseCompositionChart').getContext('2d');
723
+ new Chart(expenseCtx, {
724
+ type: 'doughnut',
725
+ data: {
726
+ labels: ['PLR', 'Custos Variáveis', 'Salários', 'Administrativas'],
727
+ datasets: [{
728
+ data: [19396, 15538, 4709, 3551],
729
+ backgroundColor: [
730
+ '#8B5CF6',
731
+ '#3B82F6',
732
+ '#EF4444',
733
+ '#F59E0B'
734
+ ],
735
+ borderWidth: 1
736
+ }]
737
+ },
738
+ options: {
739
+ responsive: true,
740
+ maintainAspectRatio: false,
741
+ plugins: {
742
+ legend: {
743
+ position: 'right',
744
+ },
745
+ tooltip: {
746
+ callbacks: {
747
+ label: function(context) {
748
+ const label = context.label || '';
749
+ const value = context.raw || 0;
750
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
751
+ const percentage = Math.round((value / total) * 100);
752
+ return `${label}: R$ ${value.toLocaleString('pt-BR')} (${percentage}%)`;
753
+ }
754
+ }
755
+ }
756
+ }
757
+ }
758
+ });
759
+
760
+ // PLR Chart
761
+ const plrCtx = document.getElementById('plrChart').getContext('2d');
762
+ new Chart(plrCtx, {
763
+ type: 'bar',
764
+ data: {
765
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
766
+ datasets: [{
767
+ label: 'PLR',
768
+ data: [19396, 19396, 19396, 19396, 15396, 19396, 27396, 21396, 21396, 21396, 21396, 21396],
769
+ backgroundColor: '#8B5CF6',
770
+ borderWidth: 1
771
+ }]
772
+ },
773
+ options: {
774
+ responsive: true,
775
+ maintainAspectRatio: false,
776
+ plugins: {
777
+ legend: {
778
+ display: false
779
+ },
780
+ tooltip: {
781
+ callbacks: {
782
+ label: function(context) {
783
+ return 'PLR: R$ ' + context.raw.toLocaleString('pt-BR');
784
+ }
785
+ }
786
+ }
787
+ },
788
+ scales: {
789
+ y: {
790
+ beginAtZero: true,
791
+ ticks: {
792
+ callback: function(value) {
793
+ return 'R$ ' + value.toLocaleString('pt-BR');
794
+ }
795
+ }
796
+ }
797
+ }
798
+ }
799
+ });
800
+ });
801
+ </script>
802
+ <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=EraDigital/arcq-junho" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
803
+ </html>