Hugging Face's logo

Spaces:
Davidals
/
reportcraft-studio
Running

App Files Community
reportcraft-studio
File size: 33,861 Bytes 
436ccba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f7c5ea1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
436ccba
2b76d42
436ccba
 
 
 
 
 
 
 
 
 
19b44b2
fabc6a1
a710641
436ccba
19b44b2
436ccba
a710641
436ccba
 
 
a710641
436ccba
 
 
a710641
436ccba
 
 
a710641
436ccba
 
 
a710641
436ccba
 
 
a710641
2b76d42
 
 
a710641
2b76d42
fabc6a1
2b76d42
a710641
2b76d42
fabc6a1
2b76d42
a710641
 
fabc6a1
2b76d42
fb148c0
19b44b2
fb148c0
 
 
 
19b44b2
fb148c0
 
19b44b2
 
fb148c0
 
 
 
 
436ccba
 
f7c5ea1
436ccba
2b76d42
436ccba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19b44b2
f7c5ea1
 
436ccba
 
 
 
 
 
 
 
 
 
 
 
 
2b76d42
 
436ccba
 
 
 
 
 
 
 
2b76d42
 
436ccba
19b44b2
2b76d42
194ccc3
436ccba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fabc6a1
436ccba
 
 
 
 
2b76d42
fabc6a1
 
2b76d42
 
 
fabc6a1
 
2b76d42
436ccba
 
fabc6a1
 
2b76d42
 
 
fabc6a1
 
2b76d42
436ccba
 
fabc6a1
 
2b76d42
 
 
fabc6a1
 
2b76d42
436ccba
 
fabc6a1
 
2b76d42
 
 
fabc6a1
 
2b76d42
436ccba
 
b00e77f
f7c5ea1
fabc6a1
436ccba
 
f7c5ea1
436ccba
fb148c0
19b44b2
f7c5ea1
19b44b2
 
f7c5ea1
19b44b2
 
194ccc3
19b44b2
 
436ccba
 
 
 
 
 
 
 
 
 
 
 
 
fabc6a1
436ccba
 
fabc6a1
436ccba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fabc6a1
436ccba
 
 
a710641
436ccba
 
 
 
 
 
 
a710641
 
436ccba
 
 
 
 
 
 
 
a710641
436ccba
 
 
 
a710641
436ccba
 
f7c5ea1
fabc6a1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f7c5ea1
436ccba
f7c5ea1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReportCraft Studio</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
        }
        .card-shadow {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .preview-card {
            transition: all 0.3s ease;
        }
        .preview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .field-item {
            cursor: grab;
        }
        .field-item:active {
            cursor: grabbing;
        }
        .table-cell {
            min-height: 50px;
        }
        .vanta-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="vanta-bg" class="vanta-bg"></div>
    
    <!-- Header -->
    <header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i data-feather="file-text" class="w-8 h-8"></i>
                <h1 class="text-2xl font-bold">ReportCraft Studio</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center">
                    <i data-feather="save" class="mr-2 w-4 h-4"></i> Save Template
                </button>
                <button class="bg-indigo-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center">
                    <i data-feather="download" class="mr-2 w-4 h-4"></i> Export
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Panel - Configuration -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Report Type & Template -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="settings" class="mr-2 text-indigo-600"></i> Report Configuration
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                <option>PDF Report</option>
                                <option>Excel Spreadsheet</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Template</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                <option>Annual Financial Summary</option>
                                <option>Project Status Overview</option>
                                <option>Department Performance</option>
                                <option>Resource Allocation</option>
                                <option>Custom Template</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Execution Level & Modules -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="layers" class="mr-2 text-indigo-600"></i> Execution Scope
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Execution Level</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                <option>Project Plan</option>
                                <option>Department</option>
                                <option>Room</option>
                                <option>Item</option>
                                <option>Purchase Order</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Execution Modules</label>
                            <div class="space-y-2">
                                <div class="flex items-center">
                                    <input type="checkbox" id="module1" class="rounded text-indigo-600 focus:ring-indigo-500">
                                    <label for="module1" class="ml-2 text-gray-700">Project Plan</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="module2" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
                                    <label for="module2" class="ml-2 text-gray-700">Department</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="module3" class="rounded text-indigo-600 focus:ring-indigo-500">
                                    <label for="module3" class="ml-2 text-gray-700">Room</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="module4" class="rounded text-indigo-600 focus:ring-indigo-500">
                                    <label for="module4" class="ml-2 text-gray-700">Item</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="module5" class="rounded text-indigo-600 focus:ring-indigo-500">
                                    <label for="module5" class="ml-2 text-gray-700">Purchase Order</label>
                                </div>
                            </div>
                        </div>
</div>
                </div>

                <!-- Field Selection & Table Layout -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="layout" class="mr-2 text-indigo-600"></i> Data Fields & Layout
                    </h2>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Available Fields</label>
                            <div class="border border-gray-300 rounded-lg p-4 h-80 overflow-y-auto bg-gray-50">
                                <div class="grid grid-cols-1 gap-2">
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="database" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Project Name</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Start Date</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>End Date</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="dollar-sign" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Budget</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="users" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Team Size</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="percent" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Completion %</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="flag" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Status</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="user" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Project Manager</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="clock" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Hours Logged</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="trending-up" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Milestone Progress</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="alert-circle" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Risk Level</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="target" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Goals Achieved</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="bar-chart-2" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Performance Index</span>
                                    </div>
                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
                                        <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
                                        <span>Last Updated</span>
                                    </div>
                                </div>
                            </div>
</div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Field Layout</label>
                            <div class="border border-gray-300 rounded-lg overflow-hidden">
                                <div class="bg-gray-100 p-2 border-b border-gray-300 font-medium">Report Header</div>
                                <div class="p-4">
                                    <div class="grid grid-cols-3 gap-2 mb-2">
                                        <div class="table-cell bg-indigo-50 border border-indigo-200 rounded flex items-center justify-center p-2 text-center text-sm font-medium">Project Name</div>
                                        <div class="table-cell bg-indigo-50 border border-indigo-200 rounded flex items-center justify-center p-2 text-center text-sm font-medium">Budget</div>
                                        <div class="table-cell bg-indigo-50 border border-indigo-200 rounded flex items-center justify-center p-2 text-center text-sm font-medium">Completion %</div>
                                    </div>
                                    <div class="grid grid-cols-3 gap-2">
                                        <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">Alpha Project</div>
                                        <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">$125,000</div>
                                        <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">78%</div>
                                    </div>
                                </div>
                            </div>
</div>
</div>
                </div>

                <!-- Grouping & Index -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="folder" class="mr-2 text-indigo-600"></i> Grouping & Index
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Group By Fields</label>
                            <select multiple class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32">
                                <option selected>Department</option>
                                <option>Project Manager</option>
                                <option>Status</option>
                                <option>Priority</option>
                                <option>Location</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Table of Contents Fields</label>
                            <select multiple class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32">
                                <option selected>Project Name</option>
                                <option>Department</option>
                                <option>Completion Status</option>
                                <option>Budget</option>
                                <option>Timeline</option>
                            </select>
</div>
</div>
                </div>
            </div>

            <!-- Right Panel - Styling & Previews -->
            <div class="space-y-8">
                <!-- Styling Options -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="droplet" class="mr-2 text-indigo-600"></i> Styling
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Primary Color</label>
                            <div class="flex space-x-2">
                                <div class="w-8 h-8 rounded-full bg-indigo-600 cursor-pointer border-2 border-white shadow"></div>
                                <div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer border-2 border-white shadow"></div>
                                <div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer border-2 border-white shadow"></div>
                                <div class="w-8 h-8 rounded-full bg-purple-600 cursor-pointer border-2 border-white shadow"></div>
                                <div class="w-8 h-8 rounded-full bg-red-600 cursor-pointer border-2 border-white shadow"></div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Font Family</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                <option>Poppins (Default)</option>
                                <option>Roboto</option>
                                <option>Open Sans</option>
                                <option>Lato</option>
                                <option>Montserrat</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Header/Footer Templates</label>
                            <div class="grid grid-cols-2 gap-3">
                                <select class="w-full p-2 border border-gray-300 rounded-lg text-sm">
                                    <option>Corporate Header</option>
                                    <option>Minimal Header</option>
                                    <option>Modern Header</option>
                                </select>
                                <select class="w-full p-2 border border-gray-300 rounded-lg text-sm">
                                    <option>Standard Footer</option>
                                    <option>Page Numbers Only</option>
                                    <option>Detailed Footer</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Checkboxes Configuration -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="check-square" class="mr-2 text-indigo-600"></i> Checkbox Options
                    </h2>
                    <div class="space-y-4">
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-gray-700">Show Budget Details</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
                            </div>
                            <div class="flex items-center justify-between ml-4">
                                <span class="text-sm text-gray-600">Default checked</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-gray-700">Include Charts</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                            </div>
                            <div class="flex items-center justify-between ml-4">
                                <span class="text-sm text-gray-600">Default checked</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-gray-700">Show Team Members</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
                            </div>
                            <div class="flex items-center justify-between ml-4">
                                <span class="text-sm text-gray-600">Default checked</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-gray-700">Export Raw Data</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                            </div>
                            <div class="flex items-center justify-between ml-4">
                                <span class="text-sm text-gray-600">Default checked</span>
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                            </div>
                        </div>
</div>
                </div>
<!-- Previews -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="eye" class="mr-2 text-indigo-600"></i> Report Preview
                    </h2>
                    <p class="text-gray-600 text-sm mb-4">Final preview of your generated report:</p>
                    <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
                        
                        
                        <button class="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
                            See Preview
                        </button>
</div>
                </div>

                <!-- Report Naming -->
                <div class="bg-white rounded-xl card-shadow p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Report Name</label>
                            <input type="text" value="Q3 Project Performance Report" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">File Name</label>
                            <input type="text" value="q3-project-report-v2" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <button class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center" onclick="showPreview()">
                            <i data-feather="play" class="mr-2 w-4 h-4"></i> Generate Report
                        </button>
</div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-gray-800 text-white py-6 mt-12">
        <div class="container mx-auto px-4 text-center">
            <p>ReportCraft Studio - Create professional reports with ease</p>
            <p class="text-gray-400 text-sm mt-2">Drag and drop fields to customize your report layout</p>
        </div>
    </footer>

    <script>
        feather.replace();
        
        // Initialize Vanta.js background
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x6366f1,
            color2: 0x8b5cf6,
            backgroundColor: 0xf8fafc
        });
        
        // Drag and drop functionality for fields
        document.querySelectorAll('.field-item').forEach(item => {
            item.addEventListener('dragstart', function(e) {
                e.dataTransfer.setData('text/plain', this.innerText);
                this.classList.add('opacity-50');
            });
            
            item.addEventListener('dragend', function() {
                this.classList.remove('opacity-50');
            });
        });
        
        document.querySelectorAll('.table-cell').forEach(cell => {
            cell.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('bg-indigo-100');
            });
            
            cell.addEventListener('dragleave', function() {
                this.classList.remove('bg-indigo-100');
            });
            
            cell.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('bg-indigo-100');
                const data = e.dataTransfer.getData('text/plain');
                this.innerHTML = `<div class="text-center">${data}</div>`;
            });
        });
        
        // Preview functionality
        function showPreview() {
            // Create preview content
            const previewContent = `
                <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-6">
                        <h1 class="text-2xl font-bold">Q3 Project Performance Report</h1>
                        <p class="mt-2">Generated on ${new Date().toLocaleDateString()}</p>
                    </div>
                    
                    <div class="p-6">
                        <div class="mb-8">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Executive Summary</h2>
                            <p class="text-gray-600">This report provides an overview of project performance for Q3 2023. Key metrics show overall completion at 72% with budget utilization at 68%.</p>
                        </div>
                        
                        <div class="mb-8">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Project Status Overview</h2>
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-100">
                                            <th class="py-2 px-4 border-b text-left">Project Name</th>
                                            <th class="py-2 px-4 border-b text-left">Budget</th>
                                            <th class="py-2 px-4 border-b text-left">Completion %</th>
                                            <th class="py-2 px-4 border-b text-left">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="py-2 px-4 border-b">Alpha Project</td>
                                            <td class="py-2 px-4 border-b">$125,000</td>
                                            <td class="py-2 px-4 border-b">78%</td>
                                            <td class="py-2 px-4 border-b text-green-600">On Track</td>
                                        </tr>
                                        <tr>
                                            <td class="py-2 px-4 border-b">Beta Initiative</td>
                                            <td class="py-2 px-4 border-b">$89,500</td>
                                            <td class="py-2 px-4 border-b">45%</td>
                                            <td class="py-2 px-4 border-b text-yellow-600">Delayed</td>
                                        </tr>
                                        <tr>
                                            <td class="py-2 px-4 border-b">Gamma Upgrade</td>
                                            <td class="py-2 px-4 border-b">$210,000</td>
                                            <td class="py-2 px-4 border-b">92%</td>
                                            <td class="py-2 px-4 border-b text-green-600">On Track</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <div>
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Department Performance</h2>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-indigo-50 p-4 rounded-lg">
                                    <h3 class="font-medium text-indigo-800">Engineering</h3>
                                    <p class="text-2xl font-bold mt-2">82%</p>
                                    <p class="text-sm text-gray-600">Avg. Completion</p>
                                </div>
                                <div class="bg-purple-50 p-4 rounded-lg">
                                    <h3 class="font-medium text-purple-800">Marketing</h3>
                                    <p class="text-2xl font-bold mt-2">65%</p>
                                    <p class="text-sm text-gray-600">Avg. Completion</p>
                                </div>
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h3 class="font-medium text-blue-800">Operations</h3>
                                    <p class="text-2xl font-bold mt-2">74%</p>
                                    <p class="text-sm text-gray-600">Avg. Completion</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 text-center text-gray-500 text-sm">
                        <p>Report generated by ReportCraft Studio</p>
                    </div>
                </div>
            `;
            
            // Create modal
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
            modal.innerHTML = `
                <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
                    <div class="sticky top-0 bg-white border-b p-4 flex justify-between items-center">
                        <h2 class="text-xl font-bold">Report Preview</h2>
                        <button onclick="this.closest('.fixed').remove()" class="text-gray-500 hover:text-gray-700">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        ${previewContent}
                    </div>
                    <div class="sticky bottom-0 bg-white border-t p-4 flex justify-end">
                        <button onclick="this.closest('.fixed').remove()" class="px-4 py-2 bg-gray-200 rounded-lg mr-2">Close</button>
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Export Report</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            feather.replace();
        }
    </script>
</body>
</html>