and a table for this year's software cost with all different softwares

index.html

@@ -51,14 +51,31 @@
                 <p id="most-expensive" class="text-3xl font-bold text-gray-800">-</p>
             </div>
         </div>
-
         <div class="mt-12 bg-white p-6 rounded-xl shadow-md">
             <h3 class="text-lg font-medium text-gray-800 mb-4">Yearly Spend Breakdown</h3>
             <div class="h-64">
                 <canvas id="yearly-chart"></canvas>
             </div>
         </div>
-    </main>
+
+        <div class="mt-8 bg-white p-6 rounded-xl shadow-md">
+            <h3 class="text-lg font-medium text-gray-800 mb-4">This Year's Software Costs</h3>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Software</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost (SGD)</th>
+                        </tr>
+                    </thead>
+                    <tbody id="current-year-table" class="bg-white divide-y divide-gray-200">
+                        <!-- Table rows will be populated by JavaScript -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+</main>
 
     <custom-footer></custom-footer>
 

script.js

@@ -101,10 +101,23 @@ const totalSpend = softwareData.reduce((sum, item) => sum + item.cost, 0);
             }
         }
     });
+    // Populate current year's software table
+    const currentYearTable = document.getElementById('current-year-table');
+    const currentYearItems = softwareData.filter(item => item.year === currentYear);
+    
+    currentYearItems.forEach(item => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.software}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.date}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.cost.toLocaleString('en-SG', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+        `;
+        currentYearTable.appendChild(row);
+    });
 
     // View toggle functionality
     document.getElementById('yearly-view').addEventListener('click', function() {
-        // In a real app, this would filter the table by year
+// In a real app, this would filter the table by year
         alert('Yearly view would show aggregated data by year');
     });