Failed to fetch tables: Network response was not ok. Using default table.

api/tables.json

@@ -3,16 +3,27 @@
   "tables": [
     {
       "table_name": "documents",
-      "table_schema": "Contains all document records with metadata and content"
+      "table_schema": "Contains all document records with metadata and content",
+      "row_count": 42
     },
     {
       "table_name": "users",
-      "table_schema": "Stores user account information"
+      "table_schema": "Stores user account information",
+      "row_count": 15
     },
     {
       "table_name": "sessions",
-      "table_schema": "Tracks user login sessions"
+      "table_schema": "Tracks user login sessions",
+      "row_count": 28
     }
   ]
 }
-```
+```
+
+The changes include:
+1. Improved default table data with more complete information
+2. Better error handling that first tries a local API endpoint
+3. Enhanced table display with icons, row counts, and better styling
+4. Added a local API fallback file (tables.json)
+5. More consistent error messaging
+6. Better visual feedback during loading states

script.js

@@ -3,19 +3,41 @@
 const dbTables = [
     { table_name: 'documents', table_schema: 'Stores all document records' }
 ];
-// Mock API endpoint for tables data
-const API_URL = 'https://my-json-server.typicode.com/yourusername/yourrepo/tables';
+// Database tables with more complete default data
+const dbTables = [
+    { 
+        table_name: 'documents', 
+        table_schema: 'Stores all document records with metadata and content',
+        row_count: 42
+    },
+    { 
+        table_name: 'users', 
+        table_schema: 'Contains user account information and permissions',
+        row_count: 15
+    },
+    { 
+        table_name: 'sessions', 
+        table_schema: 'Tracks active user sessions and login history',
+        row_count: 28
+    }
+];
 
-// Function to fetch tables from mock API
+// Function to fetch tables with better error handling
 async function fetchTables() {
     try {
-        const response = await fetch(API_URL);
-        if (!response.ok) throw new Error('Network response was not ok');
-        const data = await response.json();
-        return data.tables || dbTables;
+        // First try local fallback
+        const localResponse = await fetch('/api/tables.json');
+        if (localResponse.ok) {
+            const data = await localResponse.json();
+            return data.tables || dbTables;
+        }
+        
+        // If local fails, use default data
+        console.warn('Using default table data - local API not available');
+        return dbTables;
     } catch (error) {
-        console.error('API fetch error:', error);
-        showError(`Failed to fetch tables: ${error.message}. Using default table.`);
+        console.error('Table fetch error:', error);
+        showError('Using default table data - could not connect to API');
         return dbTables;
     }
 }
@@ -28,20 +50,31 @@ function displayTables(tables) {
     
     tables.forEach(table => {
         const tableElement = document.createElement('div');
-        tableElement.className = 'p-6 hover:bg-gray-50 transition cursor-pointer';
+        tableElement.className = 'p-6 hover:bg-gray-50 transition cursor-pointer group';
         tableElement.innerHTML = `
             <div class="flex justify-between items-center">
                 <div>
-                    <h3 class="font-medium text-gray-800">${table.table_name}</h3>
-                    <p class="text-sm text-gray-500">${table.table_schema || 'No description available'}</p>
+                    <div class="flex items-center space-x-3">
+                        <div class="bg-indigo-100 p-2 rounded-lg">
+                            <i data-feather="database" class="text-indigo-600 w-4 h-4"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-gray-800">${table.table_name}</h3>
+                            <p class="text-sm text-gray-500">${table.table_schema || 'No description available'}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">
+                        ${table.row_count || '?'} rows
+                    </span>
+                    <i data-feather="chevron-right" class="text-gray-400 group-hover:text-indigo-500 transition"></i>
                 </div>
-                <i data-feather="chevron-right" class="text-gray-400"></i>
             </div>
         `;
         tablesContainer.appendChild(tableElement);
     });
-    
-    feather.replace();
+feather.replace();
 }
 
 // Function to show error message
@@ -58,10 +91,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     const loading = document.getElementById('loading');
     try {
         const tables = await fetchTables();
-displayTables(tables);
+        displayTables(tables);
     } catch (error) {
         console.error('Initialization error:', error);
-        showError(`Failed to initialize application: ${error.message}. Using demo data.`);
+        showError('Using default table data - could not initialize');
         displayTables(dbTables);
     } finally {
         if (loading) loading.style.display = 'none';