fix a bunch is settings

static/js/settings.js

@@ -12,6 +12,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const primaryColorInput = document.getElementById('primaryColor');
     const secondaryColorInput = document.getElementById('secondaryColor');
     const colorSettingsForm = document.getElementById('colorSettingsForm');
+    const companyInfoForm = document.getElementById('companyInfoForm');
 
     // Get all tab buttons
     const settingsTabs = document.querySelectorAll('[data-bs-toggle="tab"]');
@@ -73,10 +74,14 @@ document.addEventListener('DOMContentLoaded', function() {
             eventsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Loading events...</td></tr>';
         }
 
+        // Get CSRF token
+        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
         // Fetch events data
         fetch(`/settings/events?event_type=${eventType}&date_range=${dateRange}&user_id=${userId}&page=${page}`, {
             headers: {
-                'X-Requested-With': 'XMLHttpRequest'
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-Token': csrfToken
             }
         })
             .then(response => response.text())
@@ -303,11 +308,55 @@ document.addEventListener('DOMContentLoaded', function() {
     // Handle form submission
     if (colorSettingsForm) {
         colorSettingsForm.addEventListener('submit', function(e) {
-            console.log('[Settings] Form submitted with values:', {
-                primary: primaryColorInput.value,
-                secondary: secondaryColorInput.value,
-                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
-                timestamp: new Date().toISOString()
+            e.preventDefault(); // Prevent default form submission
+            
+            const formData = new FormData(colorSettingsForm);
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+            
+            fetch(colorSettingsForm.action, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-Token': csrfToken
+                },
+                body: formData
+            })
+            .then(response => {
+                if (response.ok) {
+                    window.location.reload(); // Reload to show updated colors
+                } else {
+                    throw new Error('Failed to update colors');
+                }
+            })
+            .catch(error => {
+                console.error('Error updating colors:', error);
+                alert('Failed to update colors. Please try again.');
+            });
+        });
+    }
+
+    // Handle company info form submission
+    if (companyInfoForm) {
+        companyInfoForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const formData = new FormData(companyInfoForm);
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+            formData.append('csrf_token', csrfToken);
+            
+            fetch(companyInfoForm.action, {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (response.ok) {
+                    window.location.reload(); // Reload to show updated info
+                } else {
+                    throw new Error('Failed to update company info');
+                }
+            })
+            .catch(error => {
+                console.error('Error updating company info:', error);
+                alert('Failed to update company info. Please try again.');
             });
         });
     }