feat: Add report templates API for CRUD operations and implement SLM settings modal

- Implemented a new API router for managing report templates, including endpoints for listing, creating, retrieving, updating, and deleting templates.
- Added a new HTML partial for a unified SLM settings modal, allowing users to configure SLM settings with dynamic modem selection and FTP credentials.
- Created a report preview page with an editable data table using jspreadsheet, enabling users to modify report details and download the report as an Excel file.

templates/sound_level_meters.html

@@ -137,27 +137,8 @@
     </div>
 </div>
 
-<!-- Configuration Modal -->
-<div id="slm-config-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
-        <div class="flex items-center justify-between mb-6">
-            <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Configure SLM</h3>
-            <button onclick="closeDeviceConfigModal()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                </svg>
-            </button>
-        </div>
-
-        <div id="slm-config-modal-content">
-            <div class="animate-pulse space-y-4">
-                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
-                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
-                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
-            </div>
-        </div>
-    </div>
-</div>
+<!-- Unified SLM Settings Modal -->
+{% include 'partials/slm_settings_modal.html' %}
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
@@ -365,33 +346,23 @@ function updateDashboardChart(data) {
     }
 }
 
-// Configuration modal
+// Configuration modal - use unified SLM settings modal
 function openDeviceConfigModal(unitId) {
-    const modal = document.getElementById('slm-config-modal');
-    modal.classList.remove('hidden');
-
-    htmx.ajax('GET', `/api/slm-dashboard/config/${unitId}`, {
-        target: '#slm-config-modal-content',
-        swap: 'innerHTML'
-    });
+    // Call the unified modal function from slm_settings_modal.html
+    if (typeof openSLMSettingsModal === 'function') {
+        openSLMSettingsModal(unitId);
+    } else {
+        console.error('openSLMSettingsModal not found');
+    }
 }
 
 function closeDeviceConfigModal() {
-    document.getElementById('slm-config-modal').classList.add('hidden');
+    // Call the unified modal close function
+    if (typeof closeSLMSettingsModal === 'function') {
+        closeSLMSettingsModal();
+    }
 }
 
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') {
-        closeDeviceConfigModal();
-    }
-});
-
-document.getElementById('slm-config-modal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeDeviceConfigModal();
-    }
-});
-
 // Cleanup on page unload
 window.addEventListener('beforeunload', function() {
     stopDashboardStream();