Fix IndexedDB DataError by using numeric keys and add navigation error handling

static/js/app.js

@@ -36,27 +36,43 @@ const app = {
      * Navigate to a route
      */
     async navigate(route) {
+        console.log(`Navigating to: ${route}`);
         if (!this.routes[route]) {
             console.error(`Route not found: ${route}`);
             return;
         }
 
-        // Destroy previous component
-        if (this.currentComponent && this.currentComponent.destroy) {
-            this.currentComponent.destroy();
-        }
+        try {
+            // Destroy previous component
+            if (this.currentComponent && this.currentComponent.destroy) {
+                this.currentComponent.destroy();
+            }
 
-        // Update current route
-        this.currentRoute = route;
-        this.currentComponent = this.routes[route];
+            // Update current route
+            this.currentRoute = route;
+            this.currentComponent = this.routes[route];
 
-        // Initialize component
-        if (this.currentComponent.init) {
-            await this.currentComponent.init();
-        }
+            // Initialize component
+            if (this.currentComponent.init) {
+                await this.currentComponent.init();
+            }
 
-        // Render component
-        this.render();
+            // Render component
+            this.render();
+        } catch (error) {
+            console.error(`Navigation to ${route} failed:`, error);
+            // Fallback render or simple error message
+            const appContainer = document.getElementById('app');
+            if (appContainer) {
+                appContainer.innerHTML = `
+                    <div class="card">
+                        <h2>Error de Carga</h2>
+                        <p>No se pudo cargar la vista solicitada. Por favor, intenta de nuevo.</p>
+                        <button class="btn-primary" onclick="window.location.reload()">Refrescar App</button>
+                    </div>
+                `;
+            }
+        }
     },
 
     /**

static/js/components/capture-form.js

@@ -143,7 +143,7 @@ const CaptureFormComponent = {
             items: items,
             fishingMethod: document.getElementById('fishing-method').value,
             depth: parseFloat(document.getElementById('depth').value),
-            synced: false
+            synced: 0
         };
 
         // Save to IndexedDB

static/js/components/history.js

@@ -38,10 +38,10 @@ const HistoryComponent = {
         return this.captures
             .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
             .map(capture => `
-                <li class="history-item ${capture.synced ? 'synced' : 'unsynced'}">
+                <li class="history-item ${capture.synced === 1 ? 'synced' : 'unsynced'}">
                     <h3>
                         ${this.formatDate(capture.timestamp)}
-                        ${capture.synced ? '✅' : '⏳'}
+                        ${capture.synced === 1 ? '✅' : '⏳'}
                     </h3>
                     
                     <p>

static/js/db.js

@@ -33,7 +33,7 @@ const dbService = {
      * Get unsynced captures
      */
     async getUnsyncedCaptures() {
-        return await db.captures.where('synced').equals(false).toArray();
+        return await db.captures.where('synced').equals(0).toArray();
     },
 
     /**
@@ -41,7 +41,7 @@ const dbService = {
      */
     async updateSyncStatus(id, synced) {
         return await db.captures.update(id, {
-            synced: synced,
+            synced: synced ? 1 : 0,
             syncedAt: new Date()
         });
     },

static/js/sync.js

@@ -11,11 +11,13 @@ const syncService = {
     /**
      * Initialize sync service
      */
-    init() {
+    async init() {
+        console.log('Sync service initializing...');
+
         // Listen for online/offline events
         window.addEventListener('online', () => {
             console.log('Connection restored, syncing...');
-            this.syncNow();
+            this.syncNow().catch(err => console.error('Auto-sync online failed:', err));
         });
 
         window.addEventListener('offline', () => {
@@ -25,13 +27,17 @@ const syncService = {
         // Auto-sync every 5 minutes when online
         this.syncInterval = setInterval(() => {
             if (navigator.onLine) {
-                this.syncNow();
+                this.syncNow().catch(err => console.error('Periodic auto-sync failed:', err));
             }
         }, 5 * 60 * 1000);
 
-        // Initial sync if online
+        // Initial sync if online - wrapped in try-catch for stability
         if (navigator.onLine) {
-            this.syncNow();
+            try {
+                await this.syncNow();
+            } catch (error) {
+                console.warn('Initial sync failed (offline mode fallback):', error);
+            }
         }
     },