The connection isn't working.

script.js

@@ -1,35 +1,25 @@
-// Database connection configuration
-const dbConfig = {
-    host: 'pg-90c016a-mozmail-fead.i.aivencloud.com',
-    port: 15173,
-    user: 'avnadmin',
-    password: 'AVNS_4wOfQguMcSX18XkXZYL',
-    dbname: 'defaultdb',
-    sslmode: 'require'
-};
-// Function to fetch tables from database
+
+// Mock database tables for demo
+const mockTables = [
+    { table_name: 'users', table_schema: 'Stores user account information' },
+    { table_name: 'sessions', table_schema: 'User login sessions' },
+    { table_name: 'experiments', table_schema: 'Research experiment data' },
+    { table_name: 'participants', table_schema: 'Study participants information' },
+    { table_name: 'results', table_schema: 'Experiment results data' }
+];
+
+// Function to fetch tables from mock data
 async function fetchTables() {
     try {
-        const response = await fetch('/api/tables', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(dbConfig)
-        });
-        
-        if (!response.ok) {
-            throw new Error('Failed to fetch tables');
-        }
-        
-        return await response.json();
+        // Simulate network delay
+        await new Promise(resolve => setTimeout(resolve, 800));
+        return mockTables;
     } catch (error) {
         console.error('Error fetching tables:', error);
-        showError('Failed to fetch tables. Please check your connection.');
-        return [];
+        showError('Failed to fetch tables. Using demo data.');
+        return mockTables.slice(0, 3); // Return partial data on error
     }
 }
-
 // Function to display tables in UI
 function displayTables(tables) {
     const tablesContainer = document.querySelector('.divide-y');
@@ -62,24 +52,36 @@ function showError(message) {
     errorElement.textContent = message;
     document.querySelector('.max-w-4xl').prepend(errorElement);
 }
-
 // Initialize the application
 document.addEventListener('DOMContentLoaded', async () => {
     console.log('Application initialized');
     
+    const loading = document.getElementById('loading');
     try {
         const tables = await fetchTables();
         displayTables(tables);
     } catch (error) {
         console.error('Initialization error:', error);
-        showError('Failed to initialize application');
+        showError('Failed to initialize application. Using demo data.');
+        displayTables(mockTables);
+    } finally {
+        if (loading) loading.style.display = 'none';
     }
 });
 // Search functionality
 document.getElementById('searchInput')?.addEventListener('input', function(e) {
     const searchTerm = e.target.value.toLowerCase();
-    console.log('Searching for:', searchTerm);
+    const tablesContainer = document.querySelector('.divide-y');
+    if (!tablesContainer) return;
     
-    // In a real implementation, you would filter the tables or records
-    // based on the search term and update the UI accordingly
-});
+    const allTables = tablesContainer.querySelectorAll('div.p-6');
+    allTables.forEach(table => {
+        const name = table.querySelector('h3').textContent.toLowerCase();
+        const desc = table.querySelector('p').textContent.toLowerCase();
+        if (name.includes(searchTerm) || desc.includes(searchTerm)) {
+            table.style.display = 'block';
+        } else {
+            table.style.display = 'none';
+        }
+    });
+});