add total hour for event

static/js/app.js

@@ -25,6 +25,7 @@ const endDateInput = document.getElementById('endDate');
 const loadEventsBtn = document.getElementById('loadEvents');
 const approveEventsBtn = document.getElementById('approveEvents');
 const eventsList = document.getElementById('eventsList');
+const eventsTotal = document.getElementById('eventsTotal');
 
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
@@ -352,19 +353,24 @@ projectSelect.addEventListener('change', updateSubmitButton);
 function renderEvents(events) {
     if (!events || events.length === 0) {
         eventsList.innerHTML = '<div class="loading">No events found for range</div>';
+        eventsTotal.style.display = 'none';
         return;
     }
     
+    let totalHours = 0;
     eventsList.innerHTML = '';
     events.forEach(event => {
         const approved = event.approved;
+        const hours = parseFloat(event.hours) || 0;
+        totalHours += hours;
+        
         const item = document.createElement('div');
         item.className = 'event-item';
         item.innerHTML = `
             <div>
                 <div class="project-name">${event.date || 'Unknown date'}</div>
                 <div class="event-meta">
-                    <span>Hours: ${event.hours ?? '-'}</span>
+                    <span>Hours: ${hours.toFixed(2)}</span>
                     <span>Activity: ${event.activity?.id ?? '-'}</span>
                     <span>Project: ${event["client-project"]?.id ?? '-'}</span>
                 </div>
@@ -375,6 +381,9 @@ function renderEvents(events) {
         `;
         eventsList.appendChild(item);
     });
+
+    eventsTotal.innerHTML = `Total Hours: <strong>${totalHours.toFixed(2)}</strong>`;
+    eventsTotal.style.display = 'block';
 }
 
 function getDateRange() {