Hugging Face's logo

Spaces:
castro777
/
dash2
Running

App Files Community
castro777 commited on
Commit
0072178
·
verified ·
1 Parent(s): 361e8bf

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1376 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dash2
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: dash2
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,1376 @@
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>Gerenciador de Sessão de Poker</title>
7
+ <!-- Import Lucide Icons -->
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <style>
10
+ :root {
11
+ --primary: #3b82f6;
12
+ --primary-hover: #2563eb;
13
+ --danger: #ef4444;
14
+ --danger-hover: #dc2626;
15
+ --success: #22c55e;
16
+ --success-hover: #16a34a;
17
+ --warning: #f59e0b;
18
+ --warning-hover: #d97706;
19
+ --dark: #1e293b;
20
+ --light: #f8fafc;
21
+ --gray: #64748b;
22
+ --gray-light: #e2e8f0;
23
+ --red-dark: #991b1b;
24
+ --red-light: #fef2f2;
25
+ --green-dark: #166534;
26
+ --green-light: #f0fdf4;
27
+ --border-radius: 0.5rem;
28
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
29
+ --transition: all 0.3s ease;
30
+ }
31
+
32
+ * {
33
+ box-sizing: border-box;
34
+ margin: 0;
35
+ padding: 0;
36
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
37
+ }
38
+
39
+ body {
40
+ background-color: #f1f5f9;
41
+ color: var(--dark);
42
+ line-height: 1.6;
43
+ padding: 1rem;
44
+ }
45
+
46
+ .container {
47
+ max-width: 1200px;
48
+ margin: 0 auto;
49
+ padding: 0 1rem;
50
+ }
51
+
52
+ /* Header Styles */
53
+ .header {
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: 1rem;
57
+ margin-bottom: 1.5rem;
58
+ }
59
+
60
+ .header h1 {
61
+ font-size: 1.75rem;
62
+ font-weight: 700;
63
+ color: var(--dark);
64
+ }
65
+
66
+ .header p {
67
+ color: var(--gray);
68
+ font-size: 0.875rem;
69
+ }
70
+
71
+ /* Button Styles */
72
+ .btn {
73
+ display: inline-flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ padding: 0.5rem 1rem;
77
+ border-radius: var(--border-radius);
78
+ font-weight: 500;
79
+ font-size: 0.875rem;
80
+ cursor: pointer;
81
+ transition: var(--transition);
82
+ border: 1px solid transparent;
83
+ }
84
+
85
+ .btn-primary {
86
+ background-color: var(--primary);
87
+ color: white;
88
+ }
89
+
90
+ .btn-primary:hover {
91
+ background-color: var(--primary-hover);
92
+ }
93
+
94
+ .btn-success {
95
+ background-color: var(--success);
96
+ color: white;
97
+ }
98
+
99
+ .btn-success:hover {
100
+ background-color: var(--success-hover);
101
+ }
102
+
103
+ .btn-danger {
104
+ background-color: var(--danger);
105
+ color: white;
106
+ }
107
+
108
+ .btn-danger:hover {
109
+ background-color: var(--danger-hover);
110
+ }
111
+
112
+ .btn-warning {
113
+ background-color: var(--warning);
114
+ color: white;
115
+ }
116
+
117
+ .btn-warning:hover {
118
+ background-color: var(--warning-hover);
119
+ }
120
+
121
+ .btn-outline {
122
+ background-color: transparent;
123
+ border-color: var(--gray-light);
124
+ color: var(--dark);
125
+ }
126
+
127
+ .btn-outline:hover {
128
+ background-color: var(--gray-light);
129
+ }
130
+
131
+ .btn-icon {
132
+ margin-right: 0.5rem;
133
+ }
134
+
135
+ /* Quick Actions */
136
+ .quick-actions {
137
+ display: flex;
138
+ gap: 0.5rem;
139
+ margin-bottom: 1.5rem;
140
+ flex-wrap: wrap;
141
+ }
142
+
143
+ /* Grid Layout */
144
+ .grid {
145
+ display: grid;
146
+ gap: 1rem;
147
+ }
148
+
149
+ .grid-cols-1 {
150
+ grid-template-columns: repeat(1, 1fr);
151
+ }
152
+
153
+ .grid-cols-2 {
154
+ grid-template-columns: repeat(2, 1fr);
155
+ }
156
+
157
+ .grid-cols-3 {
158
+ grid-template-columns: repeat(3, 1fr);
159
+ }
160
+
161
+ /* Player Card */
162
+ .player-card {
163
+ background-color: white;
164
+ border-radius: var(--border-radius);
165
+ box-shadow: var(--shadow);
166
+ overflow: hidden;
167
+ transition: var(--transition);
168
+ }
169
+
170
+ .player-card:hover {
171
+ transform: translateY(-2px);
172
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
173
+ }
174
+
175
+ .player-header {
176
+ background-color: var(--primary);
177
+ color: white;
178
+ padding: 1rem;
179
+ position: relative;
180
+ }
181
+
182
+ .player-name {
183
+ font-weight: 600;
184
+ font-size: 1.125rem;
185
+ }
186
+
187
+ .player-balance {
188
+ font-size: 1.5rem;
189
+ font-weight: 700;
190
+ margin: 0.5rem 0;
191
+ }
192
+
193
+ .player-content {
194
+ padding: 1rem;
195
+ display: grid;
196
+ grid-template-columns: repeat(3, 1fr);
197
+ gap: 0.5rem;
198
+ }
199
+
200
+ .player-stat {
201
+ display: flex;
202
+ flex-direction: column;
203
+ align-items: center;
204
+ }
205
+
206
+ .stat-label {
207
+ font-size: 0.75rem;
208
+ color: var(--gray);
209
+ margin-bottom: 0.25rem;
210
+ }
211
+
212
+ .stat-value {
213
+ font-weight: 600;
214
+ }
215
+
216
+ .player-actions {
217
+ display: flex;
218
+ gap: 0.5rem;
219
+ padding: 0 1rem 1rem;
220
+ }
221
+
222
+ .player-actions .btn {
223
+ flex: 1;
224
+ font-size: 0.75rem;
225
+ padding: 0.25rem 0.5rem;
226
+ }
227
+
228
+ /* Summary Card */
229
+ .summary-card {
230
+ background-color: white;
231
+ border-radius: var(--border-radius);
232
+ box-shadow: var(--shadow);
233
+ padding: 1rem;
234
+ margin-top: 1.5rem;
235
+ }
236
+
237
+ .summary-header {
238
+ display: flex;
239
+ justify-content: space-between;
240
+ align-items: center;
241
+ margin-bottom: 1rem;
242
+ }
243
+
244
+ .summary-title {
245
+ font-weight: 600;
246
+ font-size: 1.125rem;
247
+ }
248
+
249
+ .summary-grid {
250
+ display: grid;
251
+ grid-template-columns: repeat(2, 1fr);
252
+ gap: 1rem;
253
+ }
254
+
255
+ .summary-item {
256
+ display: flex;
257
+ justify-content: space-between;
258
+ padding: 0.5rem 0;
259
+ border-bottom: 1px solid var(--gray-light);
260
+ }
261
+
262
+ .summary-item-label {
263
+ color: var(--gray);
264
+ }
265
+
266
+ .summary-item-value {
267
+ font-weight: 600;
268
+ }
269
+
270
+ .summary-total {
271
+ font-size: 1.25rem;
272
+ font-weight: 700;
273
+ color: var(--primary);
274
+ margin-top: 1rem;
275
+ padding-top: 1rem;
276
+ border-top: 1px solid var(--gray-light);
277
+ }
278
+
279
+ /* Loading State */
280
+ .loading {
281
+ display: flex;
282
+ flex-direction: column;
283
+ align-items: center;
284
+ justify-content: center;
285
+ height: 100vh;
286
+ }
287
+
288
+ .spinner {
289
+ width: 3rem;
290
+ height: 3rem;
291
+ border: 3px solid transparent;
292
+ border-top-color: var(--primary);
293
+ border-radius: 50%;
294
+ animation: spin 1s linear infinite;
295
+ margin-bottom: 1rem;
296
+ }
297
+
298
+ @keyframes spin {
299
+ to { transform: rotate(360deg); }
300
+ }
301
+
302
+ /* Error State */
303
+ .error-card {
304
+ background-color: var(--red-light);
305
+ border: 1px solid var(--danger);
306
+ border-radius: var(--border-radius);
307
+ padding: 2rem;
308
+ text-align: center;
309
+ max-width: 600px;
310
+ margin: 2rem auto;
311
+ }
312
+
313
+ .error-icon {
314
+ color: var(--danger);
315
+ width: 3rem;
316
+ height: 3rem;
317
+ margin-bottom: 1rem;
318
+ }
319
+
320
+ .error-title {
321
+ font-size: 1.25rem;
322
+ font-weight: 600;
323
+ margin-bottom: 1rem;
324
+ color: var(--danger);
325
+ }
326
+
327
+ .error-message {
328
+ margin-bottom: 1.5rem;
329
+ color: var(--red-dark);
330
+ }
331
+
332
+ .error-actions {
333
+ display: flex;
334
+ gap: 1rem;
335
+ justify-content: center;
336
+ }
337
+
338
+ /* Modal Styles */
339
+ .modal-overlay {
340
+ position: fixed;
341
+ top: 0;
342
+ left: 0;
343
+ right: 0;
344
+ bottom: 0;
345
+ background-color: rgba(0, 0, 0, 0.5);
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ z-index: 1000;
350
+ }
351
+
352
+ .modal {
353
+ background-color: white;
354
+ border-radius: var(--border-radius);
355
+ width: 90%;
356
+ max-width: 500px;
357
+ max-height: 90vh;
358
+ overflow-y: auto;
359
+ padding: 1.5rem;
360
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
361
+ }
362
+
363
+ .modal-header {
364
+ display: flex;
365
+ justify-content: space-between;
366
+ align-items: center;
367
+ margin-bottom: 1.5rem;
368
+ }
369
+
370
+ .modal-title {
371
+ font-size: 1.25rem;
372
+ font-weight: 600;
373
+ }
374
+
375
+ .modal-close {
376
+ background: none;
377
+ border: none;
378
+ font-size: 1.5rem;
379
+ cursor: pointer;
380
+ color: var(--gray);
381
+ }
382
+
383
+ .form-group {
384
+ margin-bottom: 1rem;
385
+ }
386
+
387
+ .form-label {
388
+ display: block;
389
+ margin-bottom: 0.5rem;
390
+ font-weight: 500;
391
+ }
392
+
393
+ .form-input {
394
+ width: 100%;
395
+ padding: 0.5rem;
396
+ border: 1px solid var(--gray-light);
397
+ border-radius: var(--border-radius);
398
+ font-size: 1rem;
399
+ }
400
+
401
+ .form-select {
402
+ width: 100%;
403
+ padding: 0.5rem;
404
+ border: 1px solid var(--gray-light);
405
+ border-radius: var(--border-radius);
406
+ font-size: 1rem;
407
+ background-color: white;
408
+ }
409
+
410
+ .modal-footer {
411
+ display: flex;
412
+ justify-content: flex-end;
413
+ gap: 0.5rem;
414
+ margin-top: 1.5rem;
415
+ }
416
+
417
+ /* Utilities */
418
+ .flex {
419
+ display: flex;
420
+ }
421
+
422
+ .flex-col {
423
+ flex-direction: column;
424
+ }
425
+
426
+ .items-center {
427
+ align-items: center;
428
+ }
429
+
430
+ .justify-center {
431
+ justify-content: center;
432
+ }
433
+
434
+ .justify-between {
435
+ justify-content: space-between;
436
+ }
437
+
438
+ .gap-1 {
439
+ gap: 0.25rem;
440
+ }
441
+
442
+ .gap-2 {
443
+ gap: 0.5rem;
444
+ }
445
+
446
+ .gap-4 {
447
+ gap: 1rem;
448
+ }
449
+
450
+ .mt-1 {
451
+ margin-top: 0.25rem;
452
+ }
453
+
454
+ .mt-2 {
455
+ margin-top: 0.5rem;
456
+ }
457
+
458
+ .mt-4 {
459
+ margin-top: 1rem;
460
+ }
461
+
462
+ .mb-1 {
463
+ margin-bottom: 0.25rem;
464
+ }
465
+
466
+ .mb-2 {
467
+ margin-bottom: 0.5rem;
468
+ }
469
+
470
+ .mb-4 {
471
+ margin-bottom: 1rem;
472
+ }
473
+
474
+ .p-4 {
475
+ padding: 1rem;
476
+ }
477
+
478
+ .text-center {
479
+ text-align: center;
480
+ }
481
+
482
+ /* Responsive Adjustments */
483
+ @media (min-width: 640px) {
484
+ .header {
485
+ flex-direction: row;
486
+ align-items: center;
487
+ }
488
+
489
+ .quick-actions {
490
+ flex-wrap: nowrap;
491
+ }
492
+ }
493
+
494
+ @media (max-width: 768px) {
495
+ .grid-cols-2,
496
+ .grid-cols-3 {
497
+ grid-template-columns: repeat(1, 1fr);
498
+ }
499
+
500
+ .summary-grid {
501
+ grid-template-columns: repeat(1, 1fr);
502
+ }
503
+ }
504
+ </style>
505
+ </head>
506
+ <body>
507
+ <div class="container" id="app">
508
+ <!-- Loading state will be inserted here by JavaScript -->
509
+ </div>
510
+
511
+ <script>
512
+ document.addEventListener('DOMContentLoaded', async () => {
513
+ // Initialize Lucide icons
514
+ lucide.createIcons();
515
+
516
+ // Simulate loading initial data
517
+ const app = document.getElementById('app');
518
+
519
+ // Show loading state
520
+ app.innerHTML = `
521
+ <div class="loading">
522
+ <div class="spinner"></div>
523
+ <p class="text-gray-400">Carregando sessão...</p>
524
+ </div>
525
+ `;
526
+
527
+ // Simulate network request delay
528
+ await new Promise(resolve => setTimeout(resolve, 1500));
529
+
530
+ // Simulated data
531
+ const currentSession = {
532
+ id: 'session-123',
533
+ name: 'Sessão VIP - Torneio Mensal',
534
+ startTime: new Date().toISOString(),
535
+ isActive: true
536
+ };
537
+
538
+ const players = [
539
+ { id: 'player-1', name: 'João Silva', buyins: 500, cashouts: 200, payments: 50, pendingAmount: 250 },
540
+ { id: 'player-2', name: 'Maria Oliveira', buyins: 300, cashouts: 150, payments: 100, pendingAmount: 50 },
541
+ { id: 'player-3', name: 'Carlos Mendes', buyins: 1000, cashouts: 500, payments: 200, pendingAmount: 300 },
542
+ { id: 'player-4', name: 'Ana Souza', buyins: 700, cashouts: 300, payments: 150, pendingAmount: 250 },
543
+ { id: 'player-5', name: 'Pedro Rocha', buyins: 200, cashouts: 100, payments: 75, pendingAmount: 25 }
544
+ ];
545
+
546
+ const sessionSummary = {
547
+ chipsInPlay: 1500,
548
+ totalBuyins: 2700,
549
+ totalCashouts: 1250,
550
+ totalPayments: 575,
551
+ cashReceived: 1200,
552
+ cashPaid: 800,
553
+ pixReceived: 500,
554
+ pixPaid: 200,
555
+ creditReceived: 300,
556
+ creditPaid: 150,
557
+ debitReceived: 200,
558
+ debitPaid: 100,
559
+ pendingToReceive: 500,
560
+ pendingToPay: 250
561
+ };
562
+
563
+ const chipSets = [
564
+ { id: 'chip-1', value: 1, quantity: 50 },
565
+ { id: 'chip-2', value: 5, quantity: 40 },
566
+ { id: 'chip-3', value: 10, quantity: 30 },
567
+ { id: 'chip-4', value: 25, quantity: 20 },
568
+ { id: 'chip-5', value: 50, quantity: 10 },
569
+ { id: 'chip-6', value: 100, quantity: 5 }
570
+ ];
571
+
572
+ const chipSetTotal = chipSets.reduce((total, chip) => total + (chip.value * chip.quantity), 0);
573
+
574
+ // State management
575
+ let state = {
576
+ currentSession,
577
+ players,
578
+ sessionSummary,
579
+ chipSets,
580
+ chipSetTotal,
581
+ hidePlayersValues: false,
582
+ hideSummaryValues: false,
583
+ selectedPlayerId: null,
584
+ modals: {
585
+ addPlayer: false,
586
+ buyChips: false,
587
+ cashout: false,
588
+ payment: false,
589
+ security: false,
590
+ log: false
591
+ },
592
+ securityMode: 'players'
593
+ };
594
+
595
+ // Helper functions
596
+ function formatDate(dateString) {
597
+ const date = new Date(dateString);
598
+ return date.toLocaleDateString('pt-BR', {
599
+ day: '2-digit',
600
+ month: '2-digit',
601
+ year: 'numeric',
602
+ hour: '2-digit',
603
+ minute: '2-digit'
604
+ });
605
+ }
606
+
607
+ function formatCurrency(amount) {
608
+ return new Intl.NumberFormat('pt-BR', {
609
+ style: 'currency',
610
+ currency: 'BRL'
611
+ }).format(amount);
612
+ }
613
+
614
+ // Toggle modal visibility
615
+ function toggleModal(modalName, isOpen) {
616
+ state.modals[modalName] = isOpen;
617
+ render();
618
+ }
619
+
620
+ function setSecurityMode(mode) {
621
+ state.securityMode = mode;
622
+ toggleModal('security', true);
623
+ }
624
+
625
+ function toggleHideValues(value) {
626
+ if (state.securityMode === 'players') {
627
+ state.hidePlayersValues = value;
628
+ localStorage.setItem('hidePlayersValues', JSON.stringify(value));
629
+ } else {
630
+ state.hideSummaryValues = value;
631
+ localStorage.setItem('hideSummaryValues', JSON.stringify(value));
632
+ }
633
+ toggleModal('security', false);
634
+ }
635
+
636
+ // Event handlers
637
+ function handleAddPlayer(name) {
638
+ const newPlayer = {
639
+ id: `player-${Date.now()}`,
640
+ name,
641
+ buyins: 0,
642
+ cashouts: 0,
643
+ payments: 0,
644
+ pendingAmount: 0
645
+ };
646
+ state.players = [...state.players, newPlayer];
647
+ toggleModal('addPlayer', false);
648
+ render();
649
+ }
650
+
651
+ function handleBuyChips({ playerId, amount, payNow, paymentMethod }) {
652
+ const playerIndex = state.players.findIndex(p => p.id === playerId);
653
+ if (playerIndex !== -1) {
654
+ const updatedPlayer = {
655
+ ...state.players[playerIndex],
656
+ buyins: state.players[playerIndex].buyins + amount,
657
+ pendingAmount: payNow ?
658
+ state.players[playerIndex].pendingAmount :
659
+ state.players[playerIndex].pendingAmount + amount
660
+ };
661
+
662
+ const updatedPlayers = [...state.players];
663
+ updatedPlayers[playerIndex] = updatedPlayer;
664
+ state.players = updatedPlayers;
665
+
666
+ // Update session summary
667
+ state.sessionSummary = {
668
+ ...state.sessionSummary,
669
+ totalBuyins: state.sessionSummary.totalBuyins + amount,
670
+ chipsInPlay: state.sessionSummary.chipsInPlay + amount,
671
+ ...(payNow && {
672
+ cashReceived: paymentMethod === 'cash' ?
673
+ state.sessionSummary.cashReceived + amount :
674
+ state.sessionSummary.cashReceived,
675
+ pixReceived: paymentMethod === 'pix' ?
676
+ state.sessionSummary.pixReceived + amount :
677
+ state.sessionSummary.pixReceived,
678
+ creditReceived: paymentMethod === 'credit' ?
679
+ state.sessionSummary.creditReceived + amount :
680
+ state.sessionSummary.creditReceived,
681
+ debitReceived: paymentMethod === 'debit' ?
682
+ state.sessionSummary.debitReceived + amount :
683
+ state.sessionSummary.debitReceived
684
+ }),
685
+ ...(!payNow && {
686
+ pendingToReceive: state.sessionSummary.pendingToReceive + amount
687
+ })
688
+ };
689
+ }
690
+ toggleModal('buyChips', false);
691
+ render();
692
+ }
693
+
694
+ function handleCashout({ playerId, amount, payNow, paymentMethod }) {
695
+ const playerIndex = state.players.findIndex(p => p.id === playerId);
696
+ if (playerIndex !== -1) {
697
+ const updatedPlayer = {
698
+ ...state.players[playerIndex],
699
+ cashouts: state.players[playerIndex].cashouts + amount,
700
+ pendingAmount: payNow ?
701
+ state.players[playerIndex].pendingAmount - amount :
702
+ state.players[playerIndex].pendingAmount
703
+ };
704
+
705
+ const updatedPlayers = [...state.players];
706
+ updatedPlayers[playerIndex] = updatedPlayer;
707
+ state.players = updatedPlayers;
708
+
709
+ // Update session summary
710
+ state.sessionSummary = {
711
+ ...state.sessionSummary,
712
+ totalCashouts: state.sessionSummary.totalCashouts + amount,
713
+ chipsInPlay: state.sessionSummary.chipsInPlay - amount,
714
+ ...(payNow && {
715
+ cashPaid: paymentMethod === 'cash' ?
716
+ state.sessionSummary.cashPaid + amount :
717
+ state.sessionSummary.cashPaid,
718
+ pixPaid: paymentMethod === 'pix' ?
719
+ state.sessionSummary.pixPaid + amount :
720
+ state.sessionSummary.pixPaid,
721
+ creditPaid: paymentMethod === 'credit' ?
722
+ state.sessionSummary.creditPaid + amount :
723
+ state.sessionSummary.creditPaid,
724
+ debitPaid: paymentMethod === 'debit' ?
725
+ state.sessionSummary.debitPaid + amount :
726
+ state.sessionSummary.debitPaid
727
+ }),
728
+ ...(!payNow && {
729
+ pendingToPay: state.sessionSummary.pendingToPay + amount
730
+ })
731
+ };
732
+ }
733
+ toggleModal('cashout', false);
734
+ render();
735
+ }
736
+
737
+ function handlePayment({ playerId, amount, paymentMethod, direction }) {
738
+ const playerIndex = state.players.findIndex(p => p.id === playerId);
739
+ if (playerIndex !== -1) {
740
+ const paymentAmount = direction === 'in' ? amount : -amount;
741
+ const updatedPlayer = {
742
+ ...state.players[playerIndex],
743
+ payments: state.players[playerIndex].payments + paymentAmount,
744
+ pendingAmount: direction === 'in' ?
745
+ Math.max(0, state.players[playerIndex].pendingAmount - amount) :
746
+ Math.min(0, state.players[playerIndex].pendingAmount - amount)
747
+ };
748
+
749
+ const updatedPlayers = [...state.players];
750
+ updatedPlayers[playerIndex] = updatedPlayer;
751
+ state.players = updatedPlayers;
752
+
753
+ // Update session summary
754
+ state.sessionSummary = {
755
+ ...state.sessionSummary,
756
+ totalPayments: state.sessionSummary.totalPayments + amount,
757
+ ...(direction === 'in' && {
758
+ cashReceived: paymentMethod === 'cash' ?
759
+ state.sessionSummary.cashReceived + amount :
760
+ state.sessionSummary.cashReceived,
761
+ pixReceived: paymentMethod === 'pix' ?
762
+ state.sessionSummary.pixReceived + amount :
763
+ state.sessionSummary.pixReceived,
764
+ creditReceived: paymentMethod === 'credit' ?
765
+ state.sessionSummary.creditReceived + amount :
766
+ state.sessionSummary.creditReceived,
767
+ debitReceived: paymentMethod === 'debit' ?
768
+ state.sessionSummary.debitReceived + amount :
769
+ state.sessionSummary.debitReceived,
770
+ pendingToReceive: Math.max(0, state.sessionSummary.pendingToReceive - amount)
771
+ }),
772
+ ...(direction === 'out' && {
773
+ cashPaid: paymentMethod === 'cash' ?
774
+ state.sessionSummary.cashPaid + amount :
775
+ state.sessionSummary.cashPaid,
776
+ pixPaid: paymentMethod === 'pix' ?
777
+ state.sessionSummary.pixPaid + amount :
778
+ state.sessionSummary.pixPaid,
779
+ creditPaid: paymentMethod === 'credit' ?
780
+ state.sessionSummary.creditPaid + amount :
781
+ state.sessionSummary.creditPaid,
782
+ debitPaid: paymentMethod === 'debit' ?
783
+ state.sessionSummary.debitPaid + amount :
784
+ state.sessionSummary.debitPaid,
785
+ pendingToPay: Math.max(0, state.sessionSummary.pendingToPay - amount)
786
+ })
787
+ };
788
+ }
789
+ toggleModal('payment', false);
790
+ render();
791
+ }
792
+
793
+ function updateChipSets(updatedChipSets) {
794
+ state.chipSets = updatedChipSets;
795
+ state.chipSetTotal = updatedChipSets.reduce((total, chip) => total + (chip.value * chip.quantity), 0);
796
+ render();
797
+ }
798
+
799
+ // Component rendering functions
800
+ function renderPlayerCard(player) {
801
+ const balance = player.buyins - player.cashouts + player.payments;
802
+ return `
803
+ <div class="player-card">
804
+ <div class="player-header">
805
+ <div class="player-name">${player.name}</div>
806
+ <div class="player-balance">
807
+ ${state.hidePlayersValues ? '••••' : formatCurrency(balance)}
808
+ </div>
809
+ </div>
810
+ <div class="player-content">
811
+ <div class="player-stat">
812
+ <span class="stat-label">Buy-ins</span>
813
+ <span class="stat-value">
814
+ ${state.hidePlayersValues ? '•••' : formatCurrency(player.buyins)}
815
+ </span>
816
+ </div>
817
+ <div class="player-stat">
818
+ <span class="stat-label">Cashouts</span>
819
+ <span class="stat-value">
820
+ ${state.hidePlayersValues ? '•••' : formatCurrency(player.cashouts)}
821
+ </span>
822
+ </div>
823
+ <div class="player-stat">
824
+ <span class="stat-label">Saldo Pendente</span>
825
+ <span class="stat-value">
826
+ ${state.hidePlayersValues ? '•••' : formatCurrency(player.pendingAmount)}
827
+ </span>
828
+ </div>
829
+ </div>
830
+ <div class="player-actions">
831
+ <button class="btn btn-primary"
832
+ onclick="state.selectedPlayerId='${player.id}'; toggleModal('buyChips', true)">
833
+ <i data-lucide="plus-circle" class="btn-icon"></i>
834
+ Comprar Fichas
835
+ </button>
836
+ <button class="btn btn-success"
837
+ onclick="state.selectedPlayerId='${player.id}'; toggleModal('cashout', true)">
838
+ <i data-lucide="dollar-sign" class="btn-icon"></i>
839
+ Cashout
840
+ </button>
841
+ <button class="btn btn-warning"
842
+ onclick="state.selectedPlayerId='${player.id}'; toggleModal('payment', true)">
843
+ <i data-lucide="credit-card" class="btn-icon"></i>
844
+ Pagamento
845
+ </button>
846
+ </div>
847
+ </div>
848
+ `;
849
+ }
850
+
851
+ function renderQuickActions() {
852
+ return `
853
+ <div class="quick-actions">
854
+ <button class="btn btn-primary" onclick="toggleModal('addPlayer', true)">
855
+ <i data-lucide="user-plus" class="btn-icon"></i>
856
+ Adicionar Jogador
857
+ </button>
858
+ <button class="btn btn-success" onclick="state.selectedPlayerId=null; toggleModal('buyChips', true)">
859
+ <i data-lucide="plus-circle" class="btn-icon"></i>
860
+ Comprar Fichas
861
+ </button>
862
+ <button class="btn btn-warning" onclick="state.selectedPlayerId=null; toggleModal('cashout', true)">
863
+ <i data-lucide="dollar-sign" class="btn-icon"></i>
864
+ Cashout
865
+ </button>
866
+ <button class="btn btn-danger" onclick="toggleModal('log', true)">
867
+ <i data-lucide="list" class="btn-icon"></i>
868
+ Log da Sessão
869
+ </button>
870
+ </div>
871
+ `;
872
+ }
873
+
874
+ function renderSessionSummary() {
875
+ const {
876
+ chipsInPlay,
877
+ totalBuyins,
878
+ totalCashouts,
879
+ totalPayments,
880
+ cashReceived,
881
+ cashPaid,
882
+ pixReceived,
883
+ pixPaid,
884
+ creditReceived,
885
+ creditPaid,
886
+ debitReceived,
887
+ debitPaid,
888
+ pendingToReceive,
889
+ pendingToPay
890
+ } = state.sessionSummary;
891
+
892
+ return `
893
+ <div class="summary-card">
894
+ <div class="summary-header">
895
+ <h3 class="summary-title">Resumo da Sessão</h3>
896
+ <button class="btn ${state.hideSummaryValues ? 'btn-outline' : 'btn-success'}"
897
+ onclick="setSecurityMode('summary')">
898
+ <i data-lucide="${state.hideSummaryValues ? 'eye-off' : 'eye'}" class="btn-icon"></i>
899
+ ${state.hideSummaryValues ? 'Mostrar' : 'Ocultar'}
900
+ </button>
901
+ </div>
902
+ <div class="summary-grid">
903
+ <div class="summary-item">
904
+ <span class="summary-item-label">Fichas em Jogo</span>
905
+ <span class="summary-item-value">
906
+ ${state.hideSummaryValues ? '••••' : formatCurrency(chipsInPlay)}
907
+ </span>
908
+ </div>
909
+ <div class="summary-item">
910
+ <span class="summary-item-label">Total Buy-ins</span>
911
+ <span class="summary-item-value">
912
+ ${state.hideSummaryValues ? '••••' : formatCurrency(totalBuyins)}
913
+ </span>
914
+ </div>
915
+ <div class="summary-item">
916
+ <span class="summary-item-label">Total Cashouts</span>
917
+ <span class="summary-item-value">
918
+ ${state.hideSummaryValues ? '••••' : formatCurrency(totalCashouts)}
919
+ </span>
920
+ </div>
921
+ <div class="summary-item">
922
+ <span class="summary-item-label">Total Pagamentos</span>
923
+ <span class="summary-item-value">
924
+ ${state.hideSummaryValues ? '••••' : formatCurrency(totalPayments)}
925
+ </span>
926
+ </div>
927
+ <div class="summary-item">
928
+ <span class="summary-item-label">Caixa (Dinheiro)</span>
929
+ <span class="summary-item-value">
930
+ ${state.hideSummaryValues ? '••••' : formatCurrency(cashReceived - cashPaid)}
931
+ </span>
932
+ </div>
933
+ <div class="summary-item">
934
+ <span class="summary-item-label">PIX Líquido</span>
935
+ <span class="summary-item-value">
936
+ ${state.hideSummaryValues ? '••••' : formatCurrency(pixReceived - pixPaid)}
937
+ </span>
938
+ </div>
939
+ <div class="summary-item">
940
+ <span class="summary-item-label">Crédito Líquido</span>
941
+ <span class="summary-item-value">
942
+ ${state.hideSummaryValues ? '••••' : formatCurrency(creditReceived - creditPaid)}
943
+ </span>
944
+ </div>
945
+ <div class="summary-item">
946
+ <span class="summary-item-label">Débito Líquido</span>
947
+ <span class="summary-item-value">
948
+ ${state.hideSummaryValues ? '••••' : formatCurrency(debitReceived - debitPaid)}
949
+ </span>
950
+ </div>
951
+ <div class="summary-item">
952
+ <span class="summary-item-label">A Receber</span>
953
+ <span class="summary-item-value">
954
+ ${state.hideSummaryValues ? '••••' : formatCurrency(pendingToReceive)}
955
+ </span>
956
+ </div>
957
+ <div class="summary-item">
958
+ <span class="summary-item-label">A Pagar</span>
959
+ <span class="summary-item-value">
960
+ ${state.hideSummaryValues ? '••••' : formatCurrency(pendingToPay)}
961
+ </span>
962
+ </div>
963
+ </div>
964
+ <div class="summary-total mt-4 text-center">
965
+ Total em Fichas: ${state.hideSummaryValues ? '••••' : formatCurrency(state.chipSetTotal)}
966
+ </div>
967
+ </div>
968
+ `;
969
+ }
970
+
971
+ function renderAddPlayerModal() {
972
+ return `
973
+ <div class="modal-overlay" ${state.modals.addPlayer ? '' : 'style="display: none;"'}>
974
+ <div class="modal">
975
+ <div class="modal-header">
976
+ <h3 class="modal-title">Adicionar Jogador</h3>
977
+ <button class="modal-close" onclick="toggleModal('addPlayer', false)">&times;</button>
978
+ </div>
979
+ <form id="addPlayerForm" onsubmit="event.preventDefault();
980
+ const name = document.getElementById('playerName').value;
981
+ handleAddPlayer(name);">
982
+ <div class="form-group">
983
+ <label for="playerName" class="form-label">Nome do Jogador</label>
984
+ <input type="text" id="playerName" class="form-input" required autofocus>
985
+ </div>
986
+ <div class="modal-footer">
987
+ <button type="button" class="btn btn-outline" onclick="toggleModal('addPlayer', false)">
988
+ Cancelar
989
+ </button>
990
+ <button type="submit" class="btn btn-primary">
991
+ Adicionar
992
+ </button>
993
+ </div>
994
+ </form>
995
+ </div>
996
+ </div>
997
+ `;
998
+ }
999
+
1000
+ function renderBuyChipsModal() {
1001
+ const player = state.selectedPlayerId ?
1002
+ state.players.find(p => p.id === state.selectedPlayerId) : null;
1003
+
1004
+ return `
1005
+ <div class="modal-overlay" ${state.modals.buyChips ? '' : 'style="display: none;"'}>
1006
+ <div class="modal">
1007
+ <div class="modal-header">
1008
+ <h3 class="modal-title">
1009
+ ${player ? `Comprar Fichas - ${player.name}` : 'Comprar Fichas'}
1010
+ </h3>
1011
+ <button class="modal-close" onclick="toggleModal('buyChips', false)">&times;</button>
1012
+ </div>
1013
+ <form id="buyChipsForm" onsubmit="event.preventDefault();
1014
+ const formData = new FormData(document.getElementById('buyChipsForm'));
1015
+ handleBuyChips({
1016
+ playerId: '${state.selectedPlayerId || ''}',
1017
+ amount: parseFloat(formData.get('amount')),
1018
+ payNow: formData.get('payNow') === 'true',
1019
+ paymentMethod: formData.get('paymentMethod')
1020
+ });">
1021
+ ${!player ? `
1022
+ <div class="form-group">
1023
+ <label for="playerSelect" class="form-label">Jogador</label>
1024
+ <select id="playerSelect" name="playerId" class="form-select" required>
1025
+ <option value="">Selecione um jogador</option>
1026
+ ${state.players.map(p => `
1027
+ <option value="${p.id}">${p.name}</option>
1028
+ `).join('')}
1029
+ </select>
1030
+ </div>
1031
+ ` : ''}
1032
+ <div class="form-group">
1033
+ <label for="amount" class="form-label">Valor</label>
1034
+ <input type="number" id="amount" name="amount"
1035
+ class="form-input" min="1" step="0.01" required>
1036
+ </div>
1037
+ <div class="form-group">
1038
+ <label class="form-label">Forma de Pagamento</label>
1039
+ <select name="paymentMethod" class="form-select" required>
1040
+ <option value="cash">Dinheiro</option>
1041
+ <option value="pix">PIX</option>
1042
+ <option value="credit">Crédito</option>
1043
+ <option value="debit">Débito</option>
1044
+ </select>
1045
+ </div>
1046
+ <div class="form-group">
1047
+ <label class="form-label">Status do Pagamento</label>
1048
+ <div class="flex gap-2">
1049
+ <label class="flex items-center gap-1">
1050
+ <input type="radio" name="payNow" value="true" checked>
1051
+ Pagamento Recebido
1052
+ </label>
1053
+ <label class="flex items-center gap-1">
1054
+ <input type="radio" name="payNow" value="false">
1055
+ Pendente
1056
+ </label>
1057
+ </div>
1058
+ </div>
1059
+ <div class="modal-footer">
1060
+ <button type="button" class="btn btn-outline"
1061
+ onclick="toggleModal('buyChips', false)">
1062
+ Cancelar
1063
+ </button>
1064
+ <button type="submit" class="btn btn-primary">
1065
+ Confirmar
1066
+ </button>
1067
+ </div>
1068
+ </form>
1069
+ </div>
1070
+ </div>
1071
+ `;
1072
+ }
1073
+
1074
+ function renderCashoutModal() {
1075
+ const player = state.selectedPlayerId ?
1076
+ state.players.find(p => p.id === state.selectedPlayerId) : null;
1077
+
1078
+ return `
1079
+ <div class="modal-overlay" ${state.modals.cashout ? '' : 'style="display: none;"'}>
1080
+ <div class="modal">
1081
+ <div class="modal-header">
1082
+ <h3 class="modal-title">
1083
+ ${player ? `Cashout - ${player.name}` : 'Cashout'}
1084
+ </h3>
1085
+ <button class="modal-close" onclick="toggleModal('cashout', false)">&times;</button>
1086
+ </div>
1087
+ <form id="cashoutForm" onsubmit="event.preventDefault();
1088
+ const formData = new FormData(document.getElementById('cashoutForm'));
1089
+ handleCashout({
1090
+ playerId: '${state.selectedPlayerId || ''}',
1091
+ amount: parseFloat(formData.get('amount')),
1092
+ payNow: formData.get('payNow') === 'true',
1093
+ paymentMethod: formData.get('paymentMethod')
1094
+ });">
1095
+ ${!player ? `
1096
+ <div class="form-group">
1097
+ <label for="playerSelect" class="form-label">Jogador</label>
1098
+ <select id="playerSelect" name="playerId" class="form-select" required>
1099
+ <option value="">Selecione um jogador</option>
1100
+ ${state.players.map(p => `
1101
+ <option value="${p.id}">${p.name}</option>
1102
+ `).join('')}
1103
+ </select>
1104
+ </div>
1105
+ ` : ''}
1106
+ <div class="form-group">
1107
+ <label for="amount" class="form-label">Valor</label>
1108
+ <input type="number" id="amount" name="amount"
1109
+ class="form-input" min="1" step="0.01" required>
1110
+ </div>
1111
+ <div class="form-group">
1112
+ <label class="form-label">Forma de Pagamento</label>
1113
+ <select name="paymentMethod" class="form-select" required>
1114
+ <option value="cash">Dinheiro</option>
1115
+ <option value="pix">PIX</option>
1116
+ <option value="credit">Crédito</option>
1117
+ <option value="debit">Débito</option>
1118
+ </select>
1119
+ </div>
1120
+ <div class="form-group">
1121
+ <label class="form-label">Status do Pagamento</label>
1122
+ <div class="flex gap-2">
1123
+ <label class="flex items-center gap-1">
1124
+ <input type="radio" name="payNow" value="true" checked>
1125
+ Pagamento Efetuado
1126
+ </label>
1127
+ <label class="flex items-center gap-1">
1128
+ <input type="radio" name="payNow" value="false">
1129
+ Pendente
1130
+ </label>
1131
+ </div>
1132
+ </div>
1133
+ <div class="modal-footer">
1134
+ <button type="button" class="btn btn-outline"
1135
+ onclick="toggleModal('cashout', false)">
1136
+ Cancelar
1137
+ </button>
1138
+ <button type="submit" class="btn btn-success">
1139
+ Confirmar
1140
+ </button>
1141
+ </div>
1142
+ </form>
1143
+ </div>
1144
+ </div>
1145
+ `;
1146
+ }
1147
+
1148
+ function renderPaymentModal() {
1149
+ const player = state.selectedPlayerId ?
1150
+ state.players.find(p => p.id === state.selectedPlayerId) : null;
1151
+
1152
+ return `
1153
+ <div class="modal-overlay" ${state.modals.payment ? '' : 'style="display: none;"'}>
1154
+ <div class="modal">
1155
+ <div class="modal-header">
1156
+ <h3 class="modal-title">
1157
+ ${player ? `Pagamento - ${player.name}` : 'Pagamento'}
1158
+ </h3>
1159
+ <button class="modal-close" onclick="toggleModal('payment', false)">&times;</button>
1160
+ </div>
1161
+ <form id="paymentForm" onsubmit="event.preventDefault();
1162
+ const formData = new FormData(document.getElementById('paymentForm'));
1163
+ handlePayment({
1164
+ playerId: '${state.selectedPlayerId || ''}',
1165
+ amount: parseFloat(formData.get('amount')),
1166
+ paymentMethod: formData.get('paymentMethod'),
1167
+ direction: formData.get('direction')
1168
+ });">
1169
+ ${!player ? `
1170
+ <div class="form-group">
1171
+ <label for="playerSelect" class="form-label">Jogador</label>
1172
+ <select id="playerSelect" name="playerId" class="form-select" required>
1173
+ <option value="">Selecione um jogador</option>
1174
+ ${state.players.map(p => `
1175
+ <option value="${p.id}">${p.name}</option>
1176
+ `).join('')}
1177
+ </select>
1178
+ </div>
1179
+ ` : ''}
1180
+ <div class="form-group">
1181
+ <label for="amount" class="form-label">Valor</label>
1182
+ <input type="number" id="amount" name="amount"
1183
+ class="form-input" min="1" step="0.01" required>
1184
+ </div>
1185
+ <div class="form-group">
1186
+ <label class="form-label">Direção</label>
1187
+ <div class="flex gap-2">
1188
+ <label class="flex items-center gap-1">
1189
+ <input type="radio" name="direction" value="in" checked>
1190
+ Recebimento
1191
+ </label>
1192
+ <label class="flex items-center gap-1">
1193
+ <input type="radio" name="direction" value="out">
1194
+ Pagamento
1195
+ </label>
1196
+ </div>
1197
+ </div>
1198
+ <div class="form-group">
1199
+ <label class="form-label">Forma de Pagamento</label>
1200
+ <select name="paymentMethod" class="form-select" required>
1201
+ <option value="cash">Dinheiro</option>
1202
+ <option value="pix">PIX</option>
1203
+ <option value="credit">Crédito</option>
1204
+ <option value="debit">Débito</option>
1205
+ </select>
1206
+ </div>
1207
+ <div class="modal-footer">
1208
+ <button type="button" class="btn btn-outline"
1209
+ onclick="toggleModal('payment', false)">
1210
+ Cancelar
1211
+ </button>
1212
+ <button type="submit" class="btn btn-success">
1213
+ Confirmar
1214
+ </button>
1215
+ </div>
1216
+ </form>
1217
+ </div>
1218
+ </div>
1219
+ `;
1220
+ }
1221
+
1222
+ function renderSecurityModal() {
1223
+ return `
1224
+ <div class="modal-overlay" ${state.modals.security ? '' : 'style="display: none;"'}>
1225
+ <div class="modal">
1226
+ <div class="modal-header">
1227
+ <h3 class="modal-title">
1228
+ Ocultar Valores - ${state.securityMode === 'players' ? 'Jogadores' : 'Resumo'}
1229
+ </h3>
1230
+ <button class="modal-close" onclick="toggleModal('security', false)">&times;</button>
1231
+ </div>
1232
+ <div class="p-4">
1233
+ <p class="mb-4">
1234
+ ${state.securityMode === 'players' ?
1235
+ 'Deseja ocultar os valores dos jogadores para que outras pessoas não vejam?' :
1236
+ 'Deseja ocultar os valores do resumo da sessão para que outras pessoas não vejam?'}
1237
+ </p>
1238
+ <div class="flex justify-center gap-4">
1239
+ <button class="btn btn-outline"
1240
+ onclick="toggleHideValues(false)">
1241
+ <i data-lucide="eye" class="btn-icon"></i>
1242
+ Manter Visível
1243
+ </button>
1244
+ <button class="btn btn-danger"
1245
+ onclick="toggleHideValues(true)">
1246
+ <i data-lucide="eye-off" class="btn-icon"></i>
1247
+ Ocultar Valores
1248
+ </button>
1249
+ </div>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+ `;
1254
+ }
1255
+
1256
+ function renderLogModal() {
1257
+ // Simulated log entries
1258
+ const logEntries = [
1259
+ { id: 'log-1', type: 'player_join', playerName: 'João Silva', description: 'Jogador João Silva adicionado à sessão', timestamp: new Date().toISOString() },
1260
+ { id: 'log-2', type: 'buyin', playerName: 'Maria Oliveira', description: 'Buy-in de R$ 300.00 via pix', timestamp: new Date(Date.now() - 3600000).toISOString() },
1261
+ { id: 'log-3', type: 'cashout', playerName: 'Carlos Mendes', description: 'Cashout de R$ 500.00 via cash', timestamp: new Date(Date.now() - 7200000).toISOString() },
1262
+ { id: 'log-4', type: 'payment', playerName: 'Ana Souza', description: 'Recebimento de R$ 150.00 via credit', timestamp: new Date(Date.now() - 10800000).toISOString() }
1263
+ ];
1264
+
1265
+ return `
1266
+ <div class="modal-overlay" ${state.modals.log ? '' : 'style="display: none;"'}>
1267
+ <div class="modal" style="max-width: 800px;">
1268
+ <div class="modal-header">
1269
+ <h3 class="modal-title">Log da Sessão</h3>
1270
+ <button class="modal-close" onclick="toggleModal('log', false)">&times;</button>
1271
+ </div>
1272
+ <div style="max-height: 60vh; overflow-y: auto;">
1273
+ <table style="width: 100%; border-collapse: collapse;">
1274
+ <thead>
1275
+ <tr style="background-color: #f8fafc;">
1276
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid #e2e8f0;">Data/Hora</th>
1277
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid #e2e8f0;">Tipo</th>
1278
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid #e2e8f0;">Jogador</th>
1279
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid #e2e8f0;">Descrição</th>
1280
+ </tr>
1281
+ </thead>
1282
+ <tbody>
1283
+ ${logEntries.map(log => `
1284
+ <tr>
1285
+ <td style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
1286
+ ${formatDate(log.timestamp)}
1287
+ </td>
1288
+ <td style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
1289
+ ${log.type === 'player_join' ? 'Entrada' :
1290
+ log.type === 'buyin' ? 'Buy-in' :
1291
+ log.type === 'cashout' ? 'Cashout' :
1292
+ 'Pagamento'}
1293
+ </td>
1294
+ <td style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
1295
+ ${log.playerName}
1296
+ </td>
1297
+ <td style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
1298
+ ${log.description}
1299
+ </td>
1300
+ </tr>
1301
+ `).join('')}
1302
+ </tbody>
1303
+ </table>
1304
+ </div>
1305
+ <div class="modal-footer">
1306
+ <button type="button" class="btn btn-outline"
1307
+ onclick="toggleModal('log', false)">
1308
+ Fechar
1309
+ </button>
1310
+ </div>
1311
+ </div>
1312
+ </div>
1313
+ `;
1314
+ }
1315
+
1316
+ // Main render function
1317
+ function render() {
1318
+ app.innerHTML = `
1319
+ <div>
1320
+ <div class="header">
1321
+ <div>
1322
+ <h1>${state.currentSession.name}</h1>
1323
+ <p>Iniciada em ${formatDate(state.currentSession.startTime)}</p>
1324
+ </div>
1325
+ <div class="flex flex-wrap gap-2">
1326
+ <button class="btn ${state.hidePlayersValues ? 'btn-outline' : 'btn-success'}"
1327
+ onclick="setSecurityMode('players')">
1328
+ <i data-lucide="${state.hidePlayersValues ? 'eye-off' : 'eye'}" class="btn-icon"></i>
1329
+ Jogadores
1330
+ </button>
1331
+ <button class="btn ${state.hideSummaryValues ? 'btn-outline' : 'btn-success'}"
1332
+ onclick="setSecurityMode('summary')">
1333
+ <i data-lucide="${state.hideSummaryValues ? 'eye-off' : 'eye'}" class="btn-icon"></i>
1334
+ Resumo
1335
+ </button>
1336
+ </div>
1337
+ </div>
1338
+
1339
+ ${renderQuickActions()}
1340
+
1341
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
1342
+ ${state.players.map(player => renderPlayerCard(player)).join('')}
1343
+ </div>
1344
+
1345
+ ${renderSessionSummary()}
1346
+
1347
+ ${renderAddPlayerModal()}
1348
+ ${renderBuyChipsModal()}
1349
+ ${renderCashoutModal()}
1350
+ ${renderPaymentModal()}
1351
+ ${renderSecurityModal()}
1352
+ ${renderLogModal()}
1353
+ </div>
1354
+ `;
1355
+
1356
+ // Refresh Lucide icons after rendering
1357
+ lucide.createIcons();
1358
+ }
1359
+
1360
+ // Initial render
1361
+ render();
1362
+
1363
+ // Set references to functions in global scope for event handlers
1364
+ window.state = state;
1365
+ window.toggleModal = toggleModal;
1366
+ window.setSecurityMode = setSecurityMode;
1367
+ window.toggleHideValues = toggleHideValues;
1368
+ window.handleAddPlayer = handleAddPlayer;
1369
+ window.handleBuyChips = handleBuyChips;
1370
+ window.handleCashout = handleCashout;
1371
+ window.handlePayment = handlePayment;
1372
+ window.updateChipSets = updateChipSets;
1373
+ });
1374
+ </script>
1375
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1376
+ </html>