Hugging Face's logo

Spaces:
Davidals
/
reportcraft-studio
Running

App Files Community
Davidals commited on
Commit
19b44b2
·
verified ·
1 Parent(s): fb148c0

The UI is great, but make the following changes:

Browse files

-Execution Modules should have the same amount of options as Execution Level (however, keep it as checkboxes, since more than one can be selected).
-Make the Available Fields list scrollable, since there will be a lot of fields.
-Change "Report Layout Preview" to "Field Layout" and make the table in that section to only show 1 line of header and 1 line of simulated data.
-Grouping & Index: make both list able to select multiple fields, not just one.
-Checkbox Options: make each have 2 options (to include the checkbox in the report and if it should checked by default or not)
-Add a final view (a preview) that will show how the report will look

Files changed (1) hide show
  1. index.html +56 -94
index.html CHANGED
@@ -134,18 +134,6 @@
134
  <input type="checkbox" id="module5" class="rounded text-indigo-600 focus:ring-indigo-500">
135
  <label for="module5" class="ml-2 text-gray-700">Purchase Order</label>
136
  </div>
137
- <div class="flex items-center">
138
- <input type="checkbox" id="module6" class="rounded text-indigo-600 focus:ring-indigo-500">
139
- <label for="module6" class="ml-2 text-gray-700">Resource Allocation</label>
140
- </div>
141
- <div class="flex items-center">
142
- <input type="checkbox" id="module7" class="rounded text-indigo-600 focus:ring-indigo-500">
143
- <label for="module7" class="ml-2 text-gray-700">Budget Tracking</label>
144
- </div>
145
- <div class="flex items-center">
146
- <input type="checkbox" id="module8" class="rounded text-indigo-600 focus:ring-indigo-500">
147
- <label for="module8" class="ml-2 text-gray-700">Timeline Management</label>
148
- </div>
149
  </div>
150
  </div>
151
  </div>
@@ -159,11 +147,11 @@
159
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
160
  <div>
161
  <label class="block text-sm font-medium text-gray-700 mb-2">Available Fields</label>
162
- <div class="border border-gray-300 rounded-lg p-4 h-96 overflow-y-auto bg-gray-50">
163
  <div class="grid grid-cols-1 gap-2">
164
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
165
  <i data-feather="database" class="w-4 h-4 mr-2 text-indigo-500"></i>
166
- <span>Project Name</span>
167
  </div>
168
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
169
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
@@ -202,20 +190,16 @@
202
  <span>Milestone Progress</span>
203
  </div>
204
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
205
- <i data-feather="bar-chart-2" class="w-4 h-4 mr-2 text-indigo-500"></i>
206
- <span>Resource Utilization</span>
207
- </div>
208
- <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
209
- <i data-feather="alert-triangle" class="w-4 h-4 mr-2 text-indigo-500"></i>
210
  <span>Risk Level</span>
211
  </div>
212
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
213
  <i data-feather="target" class="w-4 h-4 mr-2 text-indigo-500"></i>
214
- <span>Target Completion</span>
215
  </div>
216
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
217
- <i data-feather="dollar-sign" class="w-4 h-4 mr-2 text-indigo-500"></i>
218
- <span>Actual Spend</span>
219
  </div>
220
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
221
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
@@ -223,7 +207,7 @@
223
  </div>
224
  </div>
225
  </div>
226
- </div>
227
  <div>
228
  <label class="block text-sm font-medium text-gray-700 mb-2">Field Layout</label>
229
  <div class="border border-gray-300 rounded-lg overflow-hidden">
@@ -241,7 +225,7 @@
241
  </div>
242
  </div>
243
  </div>
244
- </div>
245
  </div>
246
  </div>
247
 
@@ -259,8 +243,6 @@
259
  <option>Status</option>
260
  <option>Priority</option>
261
  <option>Location</option>
262
- <option>Project Type</option>
263
- <option>Budget Range</option>
264
  </select>
265
  </div>
266
  <div>
@@ -271,10 +253,8 @@
271
  <option>Completion Status</option>
272
  <option>Budget</option>
273
  <option>Timeline</option>
274
- <option>Project Manager</option>
275
- <option>Risk Level</option>
276
  </select>
277
- </div>
278
  </div>
279
  </div>
280
  </div>
@@ -371,91 +351,72 @@
371
  <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
372
  </div>
373
  </div>
374
- <div class="space-y-2">
375
- <div class="flex items-center justify-between">
376
- <span class="text-gray-700">Include Recommendations</span>
377
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
378
- </div>
379
- <div class="flex items-center justify-between ml-4">
380
- <span class="text-sm text-gray-600">Default checked</span>
381
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
382
- </div>
383
- </div>
384
- <div class="space-y-2">
385
- <div class="flex items-center justify-between">
386
- <span class="text-gray-700">Show Risk Assessment</span>
387
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
388
- </div>
389
- <div class="flex items-center justify-between ml-4">
390
- <span class="text-sm text-gray-600">Default checked</span>
391
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
392
- </div>
393
- </div>
394
- </div>
395
  </div>
 
396
  <!-- Previews -->
397
  <div class="bg-white rounded-xl card-shadow p-6">
398
  <h2 class="text-xl font-semibold mb-4 flex items-center">
399
  <i data-feather="eye" class="mr-2 text-indigo-600"></i> Report Preview
400
  </h2>
401
  <p class="text-gray-600 text-sm mb-4">Final preview of your generated report:</p>
402
- <div class="border border-gray-300 rounded-lg p-4 bg-gray-50 h-96 overflow-y-auto">
403
- <div class="bg-white p-6 rounded-lg shadow">
404
- <div class="border-b pb-4 mb-4">
405
- <h3 class="text-xl font-bold text-gray-800">Q3 Project Performance Report</h3>
406
- <p class="text-gray-600">Generated on October 15, 2023</p>
 
 
 
407
  </div>
408
 
409
- <div class="mb-6">
410
- <h4 class="font-semibold text-gray-800 mb-2">Executive Summary</h4>
411
- <p class="text-gray-600 text-sm">This report provides an overview of project performance for Q3 2023. Key metrics show overall completion at 72% with budget utilization at 68%.</p>
 
 
 
 
 
 
 
 
 
 
 
 
412
  </div>
413
 
414
- <div class="mb-6">
415
- <h4 class="font-semibold text-gray-800 mb-2">Project Status</h4>
416
- <div class="overflow-x-auto">
417
- <table class="min-w-full bg-white">
418
- <thead>
419
- <tr class="bg-gray-100">
420
- <th class="py-2 px-4 border-b text-left text-sm">Project Name</th>
421
- <th class="py-2 px-4 border-b text-left text-sm">Budget</th>
422
- <th class="py-2 px-4 border-b text-left text-sm">Completion %</th>
423
- <th class="py-2 px-4 border-b text-left text-sm">Status</th>
424
- </tr>
425
- </thead>
426
- <tbody>
427
- <tr>
428
- <td class="py-2 px-4 border-b text-sm">Alpha Project</td>
429
- <td class="py-2 px-4 border-b text-sm">$125,000</td>
430
- <td class="py-2 px-4 border-b text-sm">78%</td>
431
- <td class="py-2 px-4 border-b text-sm text-green-600">On Track</td>
432
- </tr>
433
- </tbody>
434
- </table>
435
- </div>
436
  </div>
437
 
438
  <div>
439
- <h4 class="font-semibold text-gray-800 mb-2">Department Performance</h4>
440
- <div class="grid grid-cols-3 gap-4">
441
- <div class="bg-indigo-50 p-3 rounded">
442
- <p class="text-xs text-indigo-800">Engineering</p>
443
- <p class="font-bold">82%</p>
444
  </div>
445
- <div class="bg-purple-50 p-3 rounded">
446
- <p class="text-xs text-purple-800">Marketing</p>
447
- <p class="font-bold">65%</p>
448
  </div>
449
- <div class="bg-blue-50 p-3 rounded">
450
- <p class="text-xs text-blue-800">Operations</p>
451
- <p class="font-bold">74%</p>
452
  </div>
453
  </div>
454
  </div>
455
  </div>
456
- </div>
 
 
 
 
457
  </div>
458
- <!-- Report Naming -->
 
459
  <div class="bg-white rounded-xl card-shadow p-6">
460
  <h2 class="text-xl font-semibold mb-4 flex items-center">
461
  <i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
@@ -532,6 +493,7 @@
532
  this.innerHTML = `<div class="text-center">${data}</div>`;
533
  });
534
  });
 
535
  // Preview functionality
536
  function showPreview() {
537
  // Create preview content
@@ -636,6 +598,6 @@
636
  document.body.appendChild(modal);
637
  feather.replace();
638
  }
639
- </script>
640
  </body>
641
  </html>
 
134
  <input type="checkbox" id="module5" class="rounded text-indigo-600 focus:ring-indigo-500">
135
  <label for="module5" class="ml-2 text-gray-700">Purchase Order</label>
136
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
137
  </div>
138
  </div>
139
  </div>
 
147
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
148
  <div>
149
  <label class="block text-sm font-medium text-gray-700 mb-2">Available Fields</label>
150
+ <div class="border border-gray-300 rounded-lg p-4 h-80 overflow-y-auto bg-gray-50">
151
  <div class="grid grid-cols-1 gap-2">
152
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
153
  <i data-feather="database" class="w-4 h-4 mr-2 text-indigo-500"></i>
154
+ <span>Project Name</span>
155
  </div>
156
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
157
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
 
190
  <span>Milestone Progress</span>
191
  </div>
192
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
193
+ <i data-feather="alert-circle" class="w-4 h-4 mr-2 text-indigo-500"></i>
 
 
 
 
194
  <span>Risk Level</span>
195
  </div>
196
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
197
  <i data-feather="target" class="w-4 h-4 mr-2 text-indigo-500"></i>
198
+ <span>Goals Achieved</span>
199
  </div>
200
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
201
+ <i data-feather="bar-chart-2" class="w-4 h-4 mr-2 text-indigo-500"></i>
202
+ <span>Performance Index</span>
203
  </div>
204
  <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
205
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
 
207
  </div>
208
  </div>
209
  </div>
210
+ </div>
211
  <div>
212
  <label class="block text-sm font-medium text-gray-700 mb-2">Field Layout</label>
213
  <div class="border border-gray-300 rounded-lg overflow-hidden">
 
225
  </div>
226
  </div>
227
  </div>
228
+ </div>
229
  </div>
230
  </div>
231
 
 
243
  <option>Status</option>
244
  <option>Priority</option>
245
  <option>Location</option>
 
 
246
  </select>
247
  </div>
248
  <div>
 
253
  <option>Completion Status</option>
254
  <option>Budget</option>
255
  <option>Timeline</option>
 
 
256
  </select>
257
+ </div>
258
  </div>
259
  </div>
260
  </div>
 
351
  <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
352
  </div>
353
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  </div>
355
+ </div>
356
  <!-- Previews -->
357
  <div class="bg-white rounded-xl card-shadow p-6">
358
  <h2 class="text-xl font-semibold mb-4 flex items-center">
359
  <i data-feather="eye" class="mr-2 text-indigo-600"></i> Report Preview
360
  </h2>
361
  <p class="text-gray-600 text-sm mb-4">Final preview of your generated report:</p>
362
+ <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
363
+ <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
364
+ <div class="flex justify-between items-start mb-3">
365
+ <div>
366
+ <h3 class="font-bold text-lg text-gray-800">Q3 Project Performance Report</h3>
367
+ <p class="text-sm text-gray-500">Generated on October 15, 2023</p>
368
+ </div>
369
+ <div class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Draft</div>
370
  </div>
371
 
372
+ <div class="border-t border-b border-gray-200 py-3 my-3">
373
+ <div class="flex justify-between text-sm">
374
+ <div>
375
+ <span class="text-gray-500">Department:</span>
376
+ <span class="font-medium ml-1">Engineering</span>
377
+ </div>
378
+ <div>
379
+ <span class="text-gray-500">Period:</span>
380
+ <span class="font-medium ml-1">Q3 2023</span>
381
+ </div>
382
+ <div>
383
+ <span class="text-gray-500">Status:</span>
384
+ <span class="font-medium ml-1 text-green-600">On Track</span>
385
+ </div>
386
+ </div>
387
  </div>
388
 
389
+ <div class="mb-3">
390
+ <h4 class="font-medium text-gray-700 mb-2">Executive Summary</h4>
391
+ <p class="text-sm 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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
392
  </div>
393
 
394
  <div>
395
+ <h4 class="font-medium text-gray-700 mb-2">Key Metrics</h4>
396
+ <div class="grid grid-cols-3 gap-3">
397
+ <div class="bg-blue-50 p-3 rounded-lg text-center">
398
+ <div class="text-2xl font-bold text-blue-700">72%</div>
399
+ <div class="text-xs text-gray-500">Completion</div>
400
  </div>
401
+ <div class="bg-green-50 p-3 rounded-lg text-center">
402
+ <div class="text-2xl font-bold text-green-700">$245K</div>
403
+ <div class="text-xs text-gray-500">Budget Used</div>
404
  </div>
405
+ <div class="bg-purple-50 p-3 rounded-lg text-center">
406
+ <div class="text-2xl font-bold text-purple-700">18</div>
407
+ <div class="text-xs text-gray-500">Projects</div>
408
  </div>
409
  </div>
410
  </div>
411
  </div>
412
+
413
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
414
+ Generate Full Report
415
+ </button>
416
+ </div>
417
  </div>
418
+
419
+ <!-- Report Naming -->
420
  <div class="bg-white rounded-xl card-shadow p-6">
421
  <h2 class="text-xl font-semibold mb-4 flex items-center">
422
  <i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
 
493
  this.innerHTML = `<div class="text-center">${data}</div>`;
494
  });
495
  });
496
+
497
  // Preview functionality
498
  function showPreview() {
499
  // Create preview content
 
598
  document.body.appendChild(modal);
599
  feather.replace();
600
  }
601
+ </script>
602
  </body>
603
  </html>