Hugging Face's logo

Spaces:
Davidals
/
reportcraft-studio
Running

App Files Community
Davidals commited on
Commit
2b76d42
·
verified ·
1 Parent(s): 436ccba

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 +132 -87
index.html CHANGED
@@ -126,9 +126,17 @@
126
  <input type="checkbox" id="module3" class="rounded text-indigo-600 focus:ring-indigo-500">
127
  <label for="module3" class="ml-2 text-gray-700">Room</label>
128
  </div>
 
 
 
 
 
 
 
 
129
  </div>
130
  </div>
131
- </div>
132
  </div>
133
 
134
  <!-- Field Selection & Table Layout -->
@@ -139,37 +147,53 @@
139
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
140
  <div>
141
  <label class="block text-sm font-medium text-gray-700 mb-2">Available Fields</label>
142
- <div class="border border-gray-300 rounded-lg p-4 h-64 overflow-y-auto bg-gray-50">
143
- <div class="grid grid-cols-2 gap-2">
144
- <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
145
  <i data-feather="database" class="w-4 h-4 mr-2 text-indigo-500"></i>
146
  <span>Project Name</span>
147
  </div>
148
- <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
149
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
150
  <span>Start Date</span>
151
  </div>
152
- <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
153
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
154
  <span>End Date</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="dollar-sign" class="w-4 h-4 mr-2 text-indigo-500"></i>
158
  <span>Budget</span>
159
  </div>
160
- <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
161
  <i data-feather="users" class="w-4 h-4 mr-2 text-indigo-500"></i>
162
  <span>Team Size</span>
163
  </div>
164
- <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
165
  <i data-feather="percent" class="w-4 h-4 mr-2 text-indigo-500"></i>
166
  <span>Completion %</span>
167
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
  </div>
170
  </div>
171
  <div>
172
- <label class="block text-sm font-medium text-gray-700 mb-2">Report Layout Preview</label>
173
  <div class="border border-gray-300 rounded-lg overflow-hidden">
174
  <div class="bg-gray-100 p-2 border-b border-gray-300 font-medium">Report Header</div>
175
  <div class="p-4">
@@ -183,15 +207,10 @@
183
  <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>
184
  <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">78%</div>
185
  </div>
186
- <div class="grid grid-cols-3 gap-2 mt-2">
187
- <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">Beta Initiative</div>
188
- <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">$89,500</div>
189
- <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">45%</div>
190
- </div>
191
  </div>
192
  </div>
193
  </div>
194
- </div>
195
  </div>
196
 
197
  <!-- Grouping & Index -->
@@ -206,6 +225,8 @@
206
  <option selected>Department</option>
207
  <option>Project Manager</option>
208
  <option>Status</option>
 
 
209
  </select>
210
  </div>
211
  <div>
@@ -214,9 +235,11 @@
214
  <option selected>Project Name</option>
215
  <option>Department</option>
216
  <option>Completion Status</option>
 
 
217
  </select>
218
  </div>
219
- </div>
220
  </div>
221
  </div>
222
 
@@ -271,91 +294,115 @@
271
  <h2 class="text-xl font-semibold mb-4 flex items-center">
272
  <i data-feather="check-square" class="mr-2 text-indigo-600"></i> Checkbox Options
273
  </h2>
274
- <div class="space-y-3">
275
- <div class="flex items-center justify-between">
276
- <span class="text-gray-700">Show Budget Details</span>
277
- <div class="flex items-center">
278
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2" checked>
279
- <span class="text-sm text-gray-500">Default: On</span>
 
 
 
280
  </div>
281
  </div>
282
- <div class="flex items-center justify-between">
283
- <span class="text-gray-700">Include Charts</span>
284
- <div class="flex items-center">
285
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2">
286
- <span class="text-sm text-gray-500">Default: Off</span>
 
 
 
287
  </div>
288
  </div>
289
- <div class="flex items-center justify-between">
290
- <span class="text-gray-700">Show Team Members</span>
291
- <div class="flex items-center">
292
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2" checked>
293
- <span class="text-sm text-gray-500">Default: On</span>
 
 
 
294
  </div>
295
  </div>
296
- <div class="flex items-center justify-between">
297
- <span class="text-gray-700">Export Raw Data</span>
298
- <div class="flex items-center">
299
- <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2">
300
- <span class="text-sm text-gray-500">Default: Off</span>
 
 
 
301
  </div>
302
  </div>
303
  </div>
304
- </div>
305
-
306
- <!-- Previews -->
307
  <div class="bg-white rounded-xl card-shadow p-6">
308
  <h2 class="text-xl font-semibold mb-4 flex items-center">
309
- <i data-feather="eye" class="mr-2 text-indigo-600"></i> AI Generated Previews
310
  </h2>
311
- <p class="text-gray-600 text-sm mb-4">Select one of the AI-generated layouts below:</p>
312
- <div class="space-y-4">
313
- <div class="preview-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-4 cursor-pointer hover:border-indigo-400">
314
- <div class="flex justify-between items-start">
315
- <div>
316
- <h3 class="font-medium text-gray-800">Professional Layout</h3>
317
- <p class="text-xs text-gray-500 mt-1">Clean design with detailed sections</p>
318
- </div>
319
- <div class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Recommended</div>
320
- </div>
321
- <div class="mt-3 flex space-x-2">
322
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
323
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
324
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
325
- </div>
326
  </div>
327
- <div class="preview-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-4 cursor-pointer hover:border-indigo-400">
328
- <div class="flex justify-between items-start">
329
- <div>
330
- <h3 class="font-medium text-gray-800">Compact Layout</h3>
331
- <p class="text-xs text-gray-500 mt-1">Space-efficient with summary view</p>
332
- </div>
333
- <div class="text-xs text-gray-500">Option 2</div>
334
  </div>
335
- <div class="mt-3 flex space-x-2">
336
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
337
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
338
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
339
- </div>
340
- </div>
341
- <div class="preview-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-4 cursor-pointer hover:border-indigo-400">
342
- <div class="flex justify-between items-start">
343
- <div>
344
- <h3 class="font-medium text-gray-800">Visual Layout</h3>
345
- <p class="text-xs text-gray-500 mt-1">Chart-focused with key metrics</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  </div>
347
- <div class="text-xs text-gray-500">Option 3</div>
348
  </div>
349
- <div class="mt-3 flex space-x-2">
350
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
351
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
352
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
 
 
 
353
  </div>
354
  </div>
355
  </div>
356
  </div>
357
-
358
- <!-- Report Naming -->
359
  <div class="bg-white rounded-xl card-shadow p-6">
360
  <h2 class="text-xl font-semibold mb-4 flex items-center">
361
  <i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
@@ -406,7 +453,7 @@
406
  // Drag and drop functionality for fields
407
  document.querySelectorAll('.field-item').forEach(item => {
408
  item.addEventListener('dragstart', function(e) {
409
- e.dataTransfer.setData('text/plain', this.innerText);
410
  this.classList.add('opacity-50');
411
  });
412
 
@@ -414,8 +461,7 @@
414
  this.classList.remove('opacity-50');
415
  });
416
  });
417
-
418
- document.querySelectorAll('.table-cell').forEach(cell => {
419
  cell.addEventListener('dragover', function(e) {
420
  e.preventDefault();
421
  this.classList.add('bg-indigo-100');
@@ -424,12 +470,11 @@
424
  cell.addEventListener('dragleave', function() {
425
  this.classList.remove('bg-indigo-100');
426
  });
427
-
428
  cell.addEventListener('drop', function(e) {
429
  e.preventDefault();
430
  this.classList.remove('bg-indigo-100');
431
  const data = e.dataTransfer.getData('text/plain');
432
- this.innerHTML = `<div class="text-center">${data}</div>`;
433
  });
434
  });
435
  </script>
 
126
  <input type="checkbox" id="module3" class="rounded text-indigo-600 focus:ring-indigo-500">
127
  <label for="module3" class="ml-2 text-gray-700">Room</label>
128
  </div>
129
+ <div class="flex items-center">
130
+ <input type="checkbox" id="module4" class="rounded text-indigo-600 focus:ring-indigo-500">
131
+ <label for="module4" class="ml-2 text-gray-700">Item</label>
132
+ </div>
133
+ <div class="flex items-center">
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>
140
  </div>
141
 
142
  <!-- Field Selection & Table Layout -->
 
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 cursor-grab">
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 cursor-grab">
157
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
158
  <span>Start Date</span>
159
  </div>
160
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
161
  <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
162
  <span>End Date</span>
163
  </div>
164
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
165
  <i data-feather="dollar-sign" class="w-4 h-4 mr-2 text-indigo-500"></i>
166
  <span>Budget</span>
167
  </div>
168
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
169
  <i data-feather="users" class="w-4 h-4 mr-2 text-indigo-500"></i>
170
  <span>Team Size</span>
171
  </div>
172
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
173
  <i data-feather="percent" class="w-4 h-4 mr-2 text-indigo-500"></i>
174
  <span>Completion %</span>
175
  </div>
176
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
177
+ <i data-feather="flag" class="w-4 h-4 mr-2 text-indigo-500"></i>
178
+ <span>Status</span>
179
+ </div>
180
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
181
+ <i data-feather="user" class="w-4 h-4 mr-2 text-indigo-500"></i>
182
+ <span>Project Manager</span>
183
+ </div>
184
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
185
+ <i data-feather="clock" class="w-4 h-4 mr-2 text-indigo-500"></i>
186
+ <span>Hours Spent</span>
187
+ </div>
188
+ <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
189
+ <i data-feather="target" class="w-4 h-4 mr-2 text-indigo-500"></i>
190
+ <span>Milestones</span>
191
+ </div>
192
  </div>
193
  </div>
194
  </div>
195
  <div>
196
+ <label class="block text-sm font-medium text-gray-700 mb-2">Field Layout</label>
197
  <div class="border border-gray-300 rounded-lg overflow-hidden">
198
  <div class="bg-gray-100 p-2 border-b border-gray-300 font-medium">Report Header</div>
199
  <div class="p-4">
 
207
  <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>
208
  <div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">78%</div>
209
  </div>
 
 
 
 
 
210
  </div>
211
  </div>
212
  </div>
213
+ </div>
214
  </div>
215
 
216
  <!-- Grouping & Index -->
 
225
  <option selected>Department</option>
226
  <option>Project Manager</option>
227
  <option>Status</option>
228
+ <option>Priority</option>
229
+ <option>Location</option>
230
  </select>
231
  </div>
232
  <div>
 
235
  <option selected>Project Name</option>
236
  <option>Department</option>
237
  <option>Completion Status</option>
238
+ <option>Budget</option>
239
+ <option>Timeline</option>
240
  </select>
241
  </div>
242
+ </div>
243
  </div>
244
  </div>
245
 
 
294
  <h2 class="text-xl font-semibold mb-4 flex items-center">
295
  <i data-feather="check-square" class="mr-2 text-indigo-600"></i> Checkbox Options
296
  </h2>
297
+ <div class="space-y-4">
298
+ <div class="border-b pb-3">
299
+ <div class="flex items-center justify-between mb-2">
300
+ <span class="text-gray-700">Show Budget Details</span>
301
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
302
+ </div>
303
+ <div class="flex items-center justify-between">
304
+ <span class="text-sm text-gray-500">Default Checked</span>
305
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
306
  </div>
307
  </div>
308
+ <div class="border-b pb-3">
309
+ <div class="flex items-center justify-between mb-2">
310
+ <span class="text-gray-700">Include Charts</span>
311
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
312
+ </div>
313
+ <div class="flex items-center justify-between">
314
+ <span class="text-sm text-gray-500">Default Checked</span>
315
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
316
  </div>
317
  </div>
318
+ <div class="border-b pb-3">
319
+ <div class="flex items-center justify-between mb-2">
320
+ <span class="text-gray-700">Show Team Members</span>
321
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
322
+ </div>
323
+ <div class="flex items-center justify-between">
324
+ <span class="text-sm text-gray-500">Default Checked</span>
325
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
326
  </div>
327
  </div>
328
+ <div>
329
+ <div class="flex items-center justify-between mb-2">
330
+ <span class="text-gray-700">Export Raw Data</span>
331
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
332
+ </div>
333
+ <div class="flex items-center justify-between">
334
+ <span class="text-sm text-gray-500">Default Checked</span>
335
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
336
  </div>
337
  </div>
338
  </div>
339
+ </div>
340
+ <!-- Final Preview -->
 
341
  <div class="bg-white rounded-xl card-shadow p-6">
342
  <h2 class="text-xl font-semibold mb-4 flex items-center">
343
+ <i data-feather="eye" class="mr-2 text-indigo-600"></i> Final Report Preview
344
  </h2>
345
+ <div class="border border-gray-300 rounded-lg overflow-hidden">
346
+ <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-4">
347
+ <h3 class="text-lg font-bold">Q3 Project Performance Report</h3>
348
+ <p class="text-indigo-200 text-sm">Generated on November 15, 2023</p>
 
 
 
 
 
 
 
 
 
 
 
349
  </div>
350
+ <div class="p-4">
351
+ <div class="mb-4">
352
+ <h4 class="font-semibold text-gray-800 mb-2">Executive Summary</h4>
353
+ <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>
 
 
 
354
  </div>
355
+ <div class="mb-4">
356
+ <h4 class="font-semibold text-gray-800 mb-2">Project Details</h4>
357
+ <div class="overflow-x-auto">
358
+ <table class="min-w-full divide-y divide-gray-200">
359
+ <thead class="bg-gray-50">
360
+ <tr>
361
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project Name</th>
362
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
363
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th>
364
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
365
+ </tr>
366
+ </thead>
367
+ <tbody class="bg-white divide-y divide-gray-200">
368
+ <tr>
369
+ <td class="px-4 py-2 text-sm text-gray-900">Alpha Project</td>
370
+ <td class="px-4 py-2 text-sm text-gray-900"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">On Track</span></td>
371
+ <td class="px-4 py-2 text-sm text-gray-900">$125,000</td>
372
+ <td class="px-4 py-2 text-sm text-gray-900">
373
+ <div class="w-full bg-gray-200 rounded-full h-2">
374
+ <div class="bg-green-600 h-2 rounded-full" style="width: 78%"></div>
375
+ </div>
376
+ <span class="text-xs text-gray-500">78%</span>
377
+ </td>
378
+ </tr>
379
+ <tr>
380
+ <td class="px-4 py-2 text-sm text-gray-900">Beta Initiative</td>
381
+ <td class="px-4 py-2 text-sm text-gray-900"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Delayed</span></td>
382
+ <td class="px-4 py-2 text-sm text-gray-900">$89,500</td>
383
+ <td class="px-4 py-2 text-sm text-gray-900">
384
+ <div class="w-full bg-gray-200 rounded-full h-2">
385
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
386
+ </div>
387
+ <span class="text-xs text-gray-500">45%</span>
388
+ </td>
389
+ </tr>
390
+ </tbody>
391
+ </table>
392
  </div>
 
393
  </div>
394
+ <div>
395
+ <h4 class="font-semibold text-gray-800 mb-2">Key Insights</h4>
396
+ <ul class="list-disc pl-5 text-gray-600 text-sm space-y-1">
397
+ <li>Two projects are ahead of schedule</li>
398
+ <li>Budget variance remains within acceptable limits</li>
399
+ <li>Resource allocation needs optimization in Q4</li>
400
+ </ul>
401
  </div>
402
  </div>
403
  </div>
404
  </div>
405
+ <!-- Report Naming -->
 
406
  <div class="bg-white rounded-xl card-shadow p-6">
407
  <h2 class="text-xl font-semibold mb-4 flex items-center">
408
  <i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
 
453
  // Drag and drop functionality for fields
454
  document.querySelectorAll('.field-item').forEach(item => {
455
  item.addEventListener('dragstart', function(e) {
456
+ e.dataTransfer.setData('text/plain', this.querySelector('span').innerText);
457
  this.classList.add('opacity-50');
458
  });
459
 
 
461
  this.classList.remove('opacity-50');
462
  });
463
  });
464
+ document.querySelectorAll('.table-cell').forEach(cell => {
 
465
  cell.addEventListener('dragover', function(e) {
466
  e.preventDefault();
467
  this.classList.add('bg-indigo-100');
 
470
  cell.addEventListener('dragleave', function() {
471
  this.classList.remove('bg-indigo-100');
472
  });
 
473
  cell.addEventListener('drop', function(e) {
474
  e.preventDefault();
475
  this.classList.remove('bg-indigo-100');
476
  const data = e.dataTransfer.getData('text/plain');
477
+ this.innerHTML = `<div class="text-center text-sm">${data}</div>`;
478
  });
479
  });
480
  </script>