add event date to the resources page

Author: devksingh4

resources.html

@@ -8,8 +8,9 @@ <h1 class="text-4xl font-bold mb-8 dark:text-white">Resources</h1>
         <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
             <thead class="text-lg bg-gray-100 dark:bg-gray-900 transition-colors ">
                 <tr>
-                    <th class="px-6 py-3 text-left text-gray-700 dark:text-gray-200 w-1/2">Event Name</th>
-                    <th class="px-6 py-3 text-center text-gray-700 dark:text-gray-200 w-1/2">Resources</th>
+                    <th class="px-6 py-3 text-left text-gray-700 dark:text-gray-200 w-1/3">Event Name</th>
+                    <th class="px-6 py-3 text-left text-gray-700 dark:text-gray-200 w-1/3">Event Date</th>
+                    <th class="px-6 py-3 text-center text-gray-700 dark:text-gray-200 w-1/3">Resources</th>
                 </tr>
             </thead>
             <tbody id="resources-body" class="divide-y divide-gray-100 dark:divide-gray-600">
@@ -39,9 +40,16 @@ <h1 class="text-4xl font-bold mb-8 dark:text-white">Resources</h1>
                 const m = event.metadata || {};
                 return m.empty_slides || m.filled_slides || m.recording;
             }).map(event => {
+                const startDate = new Date(event.start);
+                const formattedStartDate = startDate.toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                });
                 return {
                     id: event.id,
                     title: event.title || 'Untitled Event',
+                    date: formattedStartDate,
                     calendarLink: `https://www.acm.illinois.edu/calendar?id=${event.id}&host=Academic+Committee`,
                     resources: {
                         empty_slides: event.metadata?.empty_slides || null,
@@ -86,6 +94,7 @@ <h1 class="text-4xl font-bold mb-8 dark:text-white">Resources</h1>
                             ${event.title}
                         </a>
                     </td>
+                    <td class="px-6 py-4">${event.date || 'TBD'}</td>
                     <td class="px-6 py-4">
                         <div class="flex flex-wrap justify-center gap-4">
                             ${generateResourceIcons(event.resources)}