The UI is great, but make the following changes:

-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

index.html

@@ -148,46 +148,46 @@
                         <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 cursor-grab">
+                                <div class="grid grid-cols-2 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 cursor-grab">
+                                    <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 cursor-grab">
+                                    <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 cursor-grab">
+                                    <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 cursor-grab">
+                                    <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 cursor-grab">
+                                    <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 cursor-grab">
+                                    <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 cursor-grab">
+                                    <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>
+                                        <span>Manager</span>
                                     </div>
-                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
+                                    <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 Spent</span>
+                                        <span>Duration</span>
                                     </div>
-                                    <div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center cursor-grab">
-                                        <i data-feather="target" class="w-4 h-4 mr-2 text-indigo-500"></i>
-                                        <span>Milestones</span>
+                                    <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>ROI</span>
                                     </div>
                                 </div>
                             </div>
@@ -288,7 +288,6 @@
                         </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">
@@ -336,7 +335,7 @@
                             </div>
                         </div>
                     </div>
-</div>
+                </div>
                 <!-- Final Preview -->
                 <div class="bg-white rounded-xl card-shadow p-6">
                     <h2 class="text-xl font-semibold mb-4 flex items-center">
@@ -345,47 +344,34 @@
                     <div class="border border-gray-300 rounded-lg overflow-hidden">
                         <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-4">
                             <h3 class="text-lg font-bold">Q3 Project Performance Report</h3>
-                            <p class="text-indigo-200 text-sm">Generated on November 15, 2023</p>
+                            <p class="text-indigo-200 text-sm">Generated on October 15, 2023</p>
                         </div>
                         <div class="p-4">
                             <div class="mb-4">
                                 <h4 class="font-semibold text-gray-800 mb-2">Executive Summary</h4>
-                                <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>
+                                <p class="text-gray-600 text-sm">This report provides an overview of project performance for Q3 2023. Key metrics show a 12% improvement in completion rates compared to last quarter.</p>
                             </div>
                             <div class="mb-4">
-                                <h4 class="font-semibold text-gray-800 mb-2">Project Details</h4>
+                                <h4 class="font-semibold text-gray-800 mb-2">Project Status</h4>
                                 <div class="overflow-x-auto">
                                     <table class="min-w-full divide-y divide-gray-200">
                                         <thead class="bg-gray-50">
                                             <tr>
-                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project Name</th>
-                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th>
-                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
+                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
+                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Budget</th>
+                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Progress</th>
                                             </tr>
                                         </thead>
                                         <tbody class="bg-white divide-y divide-gray-200">
                                             <tr>
-                                                <td class="px-4 py-2 text-sm text-gray-900">Alpha Project</td>
-                                                <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>
-                                                <td class="px-4 py-2 text-sm text-gray-900">$125,000</td>
-                                                <td class="px-4 py-2 text-sm text-gray-900">
-                                                    <div class="w-full bg-gray-200 rounded-full h-2">
-                                                        <div class="bg-green-600 h-2 rounded-full" style="width: 78%"></div>
-                                                    </div>
-                                                    <span class="text-xs text-gray-500">78%</span>
-                                                </td>
+                                                <td class="px-4 py-2 text-sm text-gray-800">Alpha Project</td>
+                                                <td class="px-4 py-2 text-sm text-gray-800">$125,000</td>
+                                                <td class="px-4 py-2 text-sm text-gray-800">78%</td>
                                             </tr>
                                             <tr>
-                                                <td class="px-4 py-2 text-sm text-gray-900">Beta Initiative</td>
-                                                <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>
-                                                <td class="px-4 py-2 text-sm text-gray-900">$89,500</td>
-                                                <td class="px-4 py-2 text-sm text-gray-900">
-                                                    <div class="w-full bg-gray-200 rounded-full h-2">
-                                                        <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
-                                                    </div>
-                                                    <span class="text-xs text-gray-500">45%</span>
-                                                </td>
+                                                <td class="px-4 py-2 text-sm text-gray-800">Beta Initiative</td>
+                                                <td class="px-4 py-2 text-sm text-gray-800">$89,500</td>
+                                                <td class="px-4 py-2 text-sm text-gray-800">45%</td>
                                             </tr>
                                         </tbody>
                                     </table>
@@ -394,12 +380,15 @@
                             <div>
                                 <h4 class="font-semibold text-gray-800 mb-2">Key Insights</h4>
                                 <ul class="list-disc pl-5 text-gray-600 text-sm space-y-1">
-                                    <li>Two projects are ahead of schedule</li>
-                                    <li>Budget variance remains within acceptable limits</li>
-                                    <li>Resource allocation needs optimization in Q4</li>
+                                    <li>On-track projects increased by 15% this quarter</li>
+                                    <li>Budget utilization remains within acceptable limits</li>
+                                    <li>Resource allocation has been optimized across departments</li>
                                 </ul>
                             </div>
                         </div>
+                        <div class="bg-gray-50 p-4 border-t border-gray-200">
+                            <p class="text-center text-gray-500 text-xs">Page 1 of 5</p>
+                        </div>
                     </div>
                 </div>
 <!-- Report Naming -->
@@ -449,11 +438,10 @@
             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.querySelector('span').innerText);
+                e.dataTransfer.setData('text/plain', this.innerText);
                 this.classList.add('opacity-50');
             });
             
@@ -461,7 +449,8 @@
                 this.classList.remove('opacity-50');
             });
         });
-document.querySelectorAll('.table-cell').forEach(cell => {
+        
+        document.querySelectorAll('.table-cell').forEach(cell => {
             cell.addEventListener('dragover', function(e) {
                 e.preventDefault();
                 this.classList.add('bg-indigo-100');
@@ -470,13 +459,14 @@ document.querySelectorAll('.table-cell').forEach(cell => {
             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 text-sm">${data}</div>`;
+                this.innerHTML = `<div class="text-center">${data}</div>`;
             });
         });
-    </script>
+</script>
 </body>
 </html>