migrate from angular to flask

.editorconfig

@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

.gitignore

@@ -1,42 +1,46 @@
-# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+ENV/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
 
-# Compiled output
-/dist
-/tmp
-/out-tsc
-/bazel-out
+# Flask
+instance/
+.webassets-cache
 
-# Node
-/node_modules
-npm-debug.log
-yarn-error.log
-
-# IDEs and editors
+# IDEs
+.vscode/
 .idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# Visual Studio Code
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# Miscellaneous
-/.angular/cache
-.sass-cache/
-/connect.lock
-/coverage
-/libpeerconnection.log
-testem.log
-/typings
+*.swp
+*.swo
+*~
 
-# System files
+# OS
 .DS_Store
 Thumbs.db
+
+# Logs
+*.log
+
+# Environment
+.env
+.env.local

Dockerfile

@@ -1,26 +1,23 @@
-# ETAPA 1: Construcción
-FROM node:20-alpine AS build
-WORKDIR /app
-
-# Instalar dependencias
-COPY package*.json ./
-RUN npm install
+# Hugging Face Spaces Configuration
+# Mi Pesca RD - Flask PWA
 
-# Copiar código y compilar
-COPY . .
-RUN npx ng build --configuration production
+FROM python:3.11-slim
 
-# ETAPA 2: Ejecución (Hugging Face)
-FROM node:20-alpine
 WORKDIR /app
 
-# Copiamos la carpeta completa de dist que contiene 'browser' y 'server'
-COPY --from=build /app/dist/mi-pesca-rd /app/dist/mi-pesca-rd
+# Copy requirements and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
 
-# Hugging Face requiere el puerto 7860
+# Copy application files
+COPY app.py .
+COPY models.py .
+COPY static/ ./static/
+
+# Hugging Face Spaces requires port 7860
 ENV PORT=7860
+
 EXPOSE 7860
 
-# Comando para iniciar el servidor de Angular SSR
-# IMPORTANTE: En Angular 17/18 la ruta suele ser esta:
-CMD ["node", "dist/mi-pesca-rd/server/server.mjs"]
+# Run with Gunicorn for production
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--timeout", "120", "app:app"]

README.md

@@ -1,8 +1,55 @@
----
-title: Mi Pesca RD
-emoji: 🎣
-colorFrom: blue
-colorTo: green
-sdk: docker
-app_port: 7860
----
+# Mi Pesca RD
+
+Aplicación PWA offline-first para registro de capturas pesqueras en República Dominicana.
+
+## Características
+
+- 🎣 Registro rápido de capturas (3 clics)
+- 📍 Captura automática de coordenadas GPS
+- 📱 Funciona sin conexión (offline-first)
+- 🔄 Sincronización automática cuando hay conexión
+- 🐟 Selector visual de especies con fotos
+- 📊 Historial de capturas
+- 🌊 Diseñado para uso en ambientes marinos
+
+## Tecnologías
+
+- **Backend**: Flask (Python)
+- **Frontend**: HTML/CSS/JavaScript vanilla
+- **Base de datos local**: IndexedDB (Dexie.js)
+- **PWA**: Service Worker para funcionalidad offline
+- **Despliegue**: Docker (Hugging Face Spaces)
+
+## Instalación Local
+
+```bash
+# Instalar dependencias
+pip install -r requirements.txt
+
+# Ejecutar aplicación
+python app.py
+```
+
+La aplicación estará disponible en `http://localhost:7860`
+
+## Docker
+
+```bash
+# Construir imagen
+docker build -t mipesca .
+
+# Ejecutar contenedor
+docker run -p 7860:7860 mipesca
+```
+
+## Hugging Face Spaces
+
+Este proyecto está configurado para ejecutarse en Hugging Face Spaces:
+
+- SDK: Docker
+- Puerto: 7860
+- Arquitectura: Offline-first PWA
+
+## Licencia
+
+MIT

angular.json

@@ -1,100 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "mi-pesca-rd": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:application",
-          "options": {
-            "outputPath": "dist/mi-pesca-rd",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": [],
-            "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "mi-pesca-rd:build:production"
-            },
-            "development": {
-              "buildTarget": "mi-pesca-rd:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "mi-pesca-rd:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    }
-  }
-}

app.py

@@ -0,0 +1,153 @@
+"""Flask backend for Mi Pesca RD application."""
+import os
+import json
+from datetime import datetime
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+from models import Capture, Species, ClosedSeason
+
+app = Flask(__name__, static_folder='static', static_url_path='')
+CORS(app)
+
+# Sample species data (in production, this would come from a database)
+SPECIES_DATA = [
+    Species(
+        id='chillo',
+        commonName='Chillo',
+        scientificName='Lutjanus campechanus',
+        category='Fondo',
+        imageUrl='/assets/species/chillo.jpg',
+        protected=False,
+        closedSeason=ClosedSeason(
+            start='04-01',
+            end='06-30',
+            description='Veda de reproducción'
+        )
+    ),
+    Species(
+        id='dorado',
+        commonName='Dorado',
+        scientificName='Coryphaena hippurus',
+        category='Pelágico',
+        imageUrl='/assets/species/dorado.jpg',
+        protected=False
+    ),
+    Species(
+        id='langosta',
+        commonName='Langosta del Caribe',
+        scientificName='Panulirus argus',
+        category='Invertebrado',
+        imageUrl='/assets/species/langosta.jpg',
+        protected=False,
+        closedSeason=ClosedSeason(
+            start='03-01',
+            end='06-30',
+            description='Veda de reproducción'
+        )
+    ),
+]
+
+# In-memory storage for captures (in production, use a database)
+captures_storage = []
+
+
+@app.route('/')
+def index():
+    """Serve the main HTML page."""
+    return send_from_directory('static', 'index.html')
+
+
+@app.route('/api/species', methods=['GET'])
+def get_species():
+    """Get list of all species."""
+    return jsonify([species.to_dict() for species in SPECIES_DATA])
+
+
+@app.route('/api/captures', methods=['POST'])
+def create_capture():
+    """Receive and store a new capture."""
+    try:
+        data = request.get_json()
+        
+        # Create Capture object from request data
+        capture = Capture.from_dict(data)
+        
+        # TODO: Enrich with environmental data (temperature, sea state)
+        # This would call external APIs like NOAA or OpenWeatherMap
+        
+        # Store capture (in production, save to database)
+        captures_storage.append(capture)
+        
+        # Log for debugging
+        print(f"Received capture: {capture.id} at {capture.latitude}, {capture.longitude}")
+        
+        return jsonify({
+            'success': True,
+            'id': capture.id,
+            'message': 'Captura registrada exitosamente'
+        }), 201
+        
+    except Exception as e:
+        print(f"Error processing capture: {str(e)}")
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 400
+
+
+@app.route('/api/sync', methods=['POST'])
+def sync_captures():
+    """Batch synchronization endpoint for multiple captures."""
+    try:
+        data = request.get_json()
+        captures = data.get('captures', [])
+        
+        synced_ids = []
+        errors = []
+        
+        for capture_data in captures:
+            try:
+                capture = Capture.from_dict(capture_data)
+                captures_storage.append(capture)
+                synced_ids.append(capture.id)
+            except Exception as e:
+                errors.append({
+                    'id': capture_data.get('id'),
+                    'error': str(e)
+                })
+        
+        return jsonify({
+            'success': True,
+            'synced': synced_ids,
+            'errors': errors,
+            'total': len(synced_ids)
+        }), 200
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 400
+
+
+@app.route('/api/captures', methods=['GET'])
+def get_captures():
+    """Get all stored captures (for admin/debugging)."""
+    return jsonify([capture.to_dict() for capture in captures_storage])
+
+
+@app.route('/health', methods=['GET'])
+def health_check():
+    """Health check endpoint."""
+    return jsonify({
+        'status': 'healthy',
+        'timestamp': datetime.now().isoformat()
+    })
+
+
+if __name__ == '__main__':
+    # Get port from environment variable (Hugging Face uses 7860)
+    port = int(os.environ.get('PORT', 7860))
+    
+    # Run the Flask app
+    app.run(host='0.0.0.0', port=port, debug=False)

docker-compose.yml

@@ -1,11 +1,9 @@
 version: '3.8'
+
 services:
-  angular-dev:
+  mipesca:
     build: .
-    volumes:
-      - .:/app
     ports:
-      - "4200:4200"
       - "7860:7860"
-    stdin_open: true
-    tty: true
+    environment:
+      - PORT=7860

models.py

@@ -0,0 +1,128 @@
+"""Data models for Mi Pesca RD application."""
+from dataclasses import dataclass, field
+from datetime import datetime
+from typing import List, Optional, Literal
+
+
+@dataclass
+class ClosedSeason:
+    """Closed season information for a species."""
+    start: str  # MM-DD format
+    end: str    # MM-DD format
+    description: str
+
+
+@dataclass
+class Species:
+    """Species data model."""
+    id: str
+    commonName: str
+    scientificName: str
+    category: Literal['Fondo', 'Pelágico', 'Invertebrado']
+    imageUrl: str
+    protected: bool
+    closedSeason: Optional[ClosedSeason] = None
+
+    def to_dict(self):
+        """Convert to dictionary for JSON serialization."""
+        data = {
+            'id': self.id,
+            'commonName': self.commonName,
+            'scientificName': self.scientificName,
+            'category': self.category,
+            'imageUrl': self.imageUrl,
+            'protected': self.protected
+        }
+        if self.closedSeason:
+            data['closedSeason'] = {
+                'start': self.closedSeason.start,
+                'end': self.closedSeason.end,
+                'description': self.closedSeason.description
+            }
+        return data
+
+
+@dataclass
+class CaptureItem:
+    """Individual capture item (species with quantity)."""
+    speciesId: str
+    quantity: float
+    unit: Literal['lbs', 'units']
+
+    def to_dict(self):
+        """Convert to dictionary for JSON serialization."""
+        return {
+            'speciesId': self.speciesId,
+            'quantity': self.quantity,
+            'unit': self.unit
+        }
+
+
+@dataclass
+class Capture:
+    """Capture data model."""
+    id: str
+    timestamp: datetime
+    latitude: float
+    longitude: float
+    species: List[str]
+    items: List[CaptureItem]
+    fishingMethod: str
+    depth: float
+    synced: bool
+    userId: Optional[str] = None
+    syncedAt: Optional[datetime] = None
+    temperature: Optional[float] = None
+    seaState: Optional[str] = None
+
+    def to_dict(self):
+        """Convert to dictionary for JSON serialization."""
+        return {
+            'id': self.id,
+            'timestamp': self.timestamp.isoformat() if isinstance(self.timestamp, datetime) else self.timestamp,
+            'latitude': self.latitude,
+            'longitude': self.longitude,
+            'species': self.species,
+            'items': [item.to_dict() if hasattr(item, 'to_dict') else item for item in self.items],
+            'fishingMethod': self.fishingMethod,
+            'depth': self.depth,
+            'synced': self.synced,
+            'userId': self.userId,
+            'syncedAt': self.syncedAt.isoformat() if self.syncedAt and isinstance(self.syncedAt, datetime) else self.syncedAt,
+            'temperature': self.temperature,
+            'seaState': self.seaState
+        }
+
+    @classmethod
+    def from_dict(cls, data: dict):
+        """Create Capture instance from dictionary."""
+        items = []
+        for item in data.get('items', []):
+            if isinstance(item, dict):
+                items.append(CaptureItem(**item))
+            else:
+                items.append(item)
+        
+        timestamp = data.get('timestamp')
+        if isinstance(timestamp, str):
+            timestamp = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
+        
+        syncedAt = data.get('syncedAt')
+        if syncedAt and isinstance(syncedAt, str):
+            syncedAt = datetime.fromisoformat(syncedAt.replace('Z', '+00:00'))
+        
+        return cls(
+            id=data.get('id'),
+            timestamp=timestamp,
+            latitude=data.get('latitude'),
+            longitude=data.get('longitude'),
+            species=data.get('species', []),
+            items=items,
+            fishingMethod=data.get('fishingMethod'),
+            depth=data.get('depth'),
+            synced=data.get('synced', False),
+            userId=data.get('userId'),
+            syncedAt=syncedAt,
+            temperature=data.get('temperature'),
+            seaState=data.get('seaState')
+        )

package.json

@@ -1,45 +0,0 @@
-{
-  "name": "mi-pesca-rd",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test",
-    "serve:ssr:mi-pesca-rd": "node dist/mi-pesca-rd/server/server.mjs"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/service-worker": "^17.0.0",
-    "@angular/animations": "^17.3.0",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/platform-server": "^17.3.0",
-    "@angular/router": "^17.3.0",
-    "@angular/ssr": "^17.3.17",
-    "express": "^4.18.2",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.17",
-    "@angular/cli": "^17.3.17",
-    "@angular/compiler-cli": "^17.3.0",
-    "@types/express": "^4.17.17",
-    "@types/jasmine": "~5.1.0",
-    "@types/node": "^18.18.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
-  }
-}

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+Flask-CORS==4.0.0
+python-dotenv==1.0.0
+requests==2.31.0
+gunicorn==21.2.0

server.ts

@@ -1,56 +0,0 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
-import express from 'express';
-import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
-  const server = express();
-  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-  const browserDistFolder = resolve(serverDistFolder, '../browser');
-  const indexHtml = join(serverDistFolder, 'index.server.html');
-
-  const commonEngine = new CommonEngine();
-
-  server.set('view engine', 'html');
-  server.set('views', browserDistFolder);
-
-  // Example Express Rest API endpoints
-  // server.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(browserDistFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
-
-    commonEngine
-      .render({
-        bootstrap,
-        documentFilePath: indexHtml,
-        url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: browserDistFolder,
-        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
-      })
-      .then((html) => res.send(html))
-      .catch((err) => next(err));
-  });
-
-  return server;
-}
-
-function run(): void {
-  const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-run();

src/app/app.component.html

@@ -1,41 +0,0 @@
-<div class="container" style="padding: 20px; max-width: 500px; margin: auto;">
-  <header style="text-align: center; border-bottom: 2px solid #004488;">
-    <h1 style="color: #004488; margin-bottom: 5px;">🎣 MI PESCA RD</h1>
-    <p style="font-size: 0.9em; color: #666;">Investigación de Recursos Pesqueros</p>
-  </header>
-
-  <main style="margin-top: 20px;">
-    <div style="margin-bottom: 15px;">
-      <label>Especie:</label>
-      <select #esp style="width: 100%; padding: 15px; font-size: 1.2rem; border-radius: 8px;">
-        <option value="Chillo">Chillo</option>
-        <option value="Colirrubia">Colirrubia</option>
-        <option value="Mero">Mero Rojo</option>
-        <option value="Langosta">Langosta (Veda check)</option>
-      </select>
-    </div>
-
-    <div style="margin-bottom: 15px;">
-      <label>Peso Estimado (Lbs):</label>
-      <input #peso type="number" style="width: 100%; padding: 15px; font-size: 1.2rem; border-radius: 8px;">
-    </div>
-
-    <div style="margin-bottom: 25px;">
-      <label>Profundidad (Brazadas):</label>
-      <input #braz type="range" min="1" max="150" value="20" style="width: 100%;">
-      <p style="text-align: center; font-weight: bold;">{{braz.value}} brazadas</p>
-    </div>
-
-    <button (click)="guardarCaptura(esp.value, +peso.value, +braz.value)"
-            style="width: 100%; padding: 20px; background: #004488; color: white; border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer;">
-      REGISTRAR CAPTURA
-    </button>
-  </main>
-
-  <section style="margin-top: 30px;">
-    <h3>Capturas hoy: {{registros.length}}</h3>
-    <div *ngFor="let r of registros.slice(-3)" style="background: #f0f0f0; margin-bottom: 10px; padding: 10px; border-radius: 5px; font-size: 0.9em;">
-      {{r.especie}} - {{r.pesoLbs}}lbs - {{r.fecha | date:'shortTime'}}
-    </div>
-  </section>
-</div>

src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'mi-pesca-rd' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('mi-pesca-rd');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, mi-pesca-rd');
-  });
-});

src/app/app.component.ts

@@ -1,58 +0,0 @@
-import { Component, Inject, PLATFORM_ID, OnInit } from '@angular/core';
-import { CommonModule,isPlatformBrowser } from '@angular/common';
-import { RegistroPesca } from './models/pesca.model';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports:[CommonModule],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent implements OnInit {
-  registros: RegistroPesca[] = [];
-  isBrowser: boolean;
-
-  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
-    // Verificamos si estamos en el navegador del pescador
-    this.isBrowser = isPlatformBrowser(this.platformId);
-  }
-
-  ngOnInit() {
-    if (this.isBrowser) {
-      this.cargarDatosLocales();
-    }
-  }
-
-  guardarCaptura(especie: string, peso: number, brazadas: number) {
-    if (!this.isBrowser) return;
-
-    // Captura de GPS obligatoria para el mapa de calor
-    navigator.geolocation.getCurrentPosition(
-      (pos) => {
-        const nuevo: RegistroPesca = {
-          especie,
-          pesoLbs: peso,
-          brazadas,
-          latitud: pos.coords.latitude,
-          longitud: pos.coords.longitude,
-          fecha: new Date().toISOString(),
-          sincronizado: false
-        };
-
-        this.registros.push(nuevo);
-        localStorage.setItem('db_pesca', JSON.stringify(this.registros));
-        alert('Captura registrada exitosamente en alta mar 🌊');
-      },
-      (error) => {
-        alert('Por favor activa el GPS para registrar la ubicación del recurso.');
-      },
-      { enableHighAccuracy: true } // Alta precisión para investigación científica
-    );
-  }
-
-  cargarDatosLocales() {
-    const data = localStorage.getItem('db_pesca');
-    if (data) this.registros = JSON.parse(data);
-  }
-}

src/app/app.config.server.ts

@@ -1,11 +0,0 @@
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
-import { appConfig } from './app.config';
-
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering()
-  ]
-};
-
-export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -1,16 +0,0 @@
-import { ApplicationConfig, isDevMode } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
-import { provideServiceWorker } from '@angular/service-worker';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    provideClientHydration(), // Importante para SSR
-    provideServiceWorker('ngsw-worker.js', {
-        enabled: !isDevMode(),
-        registrationStrategy: 'registerWhenStable:30000'
-    })
-  ]
-};

src/app/app.routes.ts

@@ -1,3 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];

src/app/models/pesca.model.ts

@@ -1,9 +0,0 @@
-export interface RegistroPesca {
-  especie: string;
-  pesoLbs: number;
-  brazadas: number;
-  latitud: number;
-  longitud: number;
-  fecha: string; // ISO String
-  sincronizado: boolean;
-}

src/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>MiPescaRd</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

src/main.server.ts

@@ -1,7 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app/app.component';
-import { config } from './app/app.config.server';
-
-const bootstrap = () => bootstrapApplication(AppComponent, config);
-
-export default bootstrap;

src/main.ts

@@ -1,6 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
-
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

static/css/styles.css

@@ -0,0 +1,334 @@
+/* Global Styles - Mi Pesca RD */
+:root {
+    --primary-color: #0D47A1;
+    --secondary-color: #4CAF50;
+    --warning-color: #FF9800;
+    --danger-color: #F44336;
+    --background-color: #ffffff;
+    --text-color: #000000;
+    --card-bg: #f8f9fa;
+    --border-radius: 8px;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+* {
+    box-sizing: border-box;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-size: 18px;
+}
+
+h1,
+h2,
+h3 {
+    margin-top: 0;
+    color: var(--primary-color);
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+/* App Container */
+#app {
+    max-width: 600px;
+    margin: 0 auto;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Loading State */
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    text-align: center;
+}
+
+/* Navigation */
+.nav {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: var(--shadow);
+}
+
+.nav h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: white;
+}
+
+.nav-back {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
+/* Main Content */
+.content {
+    flex: 1;
+    padding: 1rem;
+}
+
+/* Cards */
+.card {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: var(--shadow);
+}
+
+/* Buttons */
+button {
+    min-height: 50px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #0a3a7f;
+}
+
+.btn-secondary {
+    background-color: var(--secondary-color);
+    color: white;
+}
+
+.btn-secondary:hover {
+    background-color: #45a049;
+}
+
+.btn-danger {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+.btn-full {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border: 2px solid #ddd;
+    border-radius: var(--border-radius);
+    background-color: white;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+/* Species Grid */
+.species-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.species-card {
+    background: white;
+    border: 3px solid transparent;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.2s;
+    box-shadow: var(--shadow);
+}
+
+.species-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.species-card.selected {
+    border-color: var(--secondary-color);
+    background-color: #e8f5e9;
+}
+
+.species-card.protected {
+    border-color: var(--danger-color);
+}
+
+.species-card img {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+}
+
+.species-card h3 {
+    font-size: 1rem;
+    margin: 0.5rem 0 0 0;
+    color: var(--text-color);
+}
+
+.species-card .badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+}
+
+.badge-protected {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+.badge-veda {
+    background-color: var(--warning-color);
+    color: white;
+}
+
+/* History List */
+.history-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.history-item {
+    background: white;
+    border-left: 4px solid var(--primary-color);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+}
+
+.history-item.synced {
+    border-left-color: var(--secondary-color);
+}
+
+.history-item.unsynced {
+    border-left-color: var(--warning-color);
+}
+
+.history-item h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1rem;
+}
+
+.history-item p {
+    margin: 0.25rem 0;
+    font-size: 0.9rem;
+    color: #666;
+}
+
+/* Status Indicators */
+.status-bar {
+    background-color: var(--card-bg);
+    padding: 0.5rem 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    border-bottom: 1px solid #ddd;
+}
+
+.status-online {
+    color: var(--secondary-color);
+}
+
+.status-offline {
+    color: var(--warning-color);
+}
+
+/* Confirmation View */
+.confirmation-details {
+    background: white;
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 1rem;
+}
+
+.confirmation-details dt {
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-top: 0.5rem;
+}
+
+.confirmation-details dd {
+    margin: 0.25rem 0 0.5rem 0;
+}
+
+/* Mobile Responsive */
+@media (max-width: 600px) {
+    body {
+        font-size: 16px;
+    }
+
+    .species-grid {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    }
+
+    .content {
+        padding: 0.75rem;
+    }
+}
+
+/* Utility Classes */
+.text-center {
+    text-align: center;
+}
+
+.mt-1 {
+    margin-top: 1rem;
+}
+
+.mb-1 {
+    margin-bottom: 1rem;
+}
+
+.hidden {
+    display: none;
+}

static/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Mi Pesca RD - Registro de capturas pesqueras en República Dominicana">
+    <meta name="theme-color" content="#0D47A1">
+
+    <!-- PWA Meta Tags -->
+    <link rel="manifest" href="/manifest.json">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Mi Pesca RD">
+
+    <title>Mi Pesca RD</title>
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="/css/styles.css">
+
+    <!-- Dexie.js for IndexedDB -->
+    <script src="https://unpkg.com/dexie@3.2.4/dist/dexie.min.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <!-- App content will be rendered here -->
+        <div class="loading">
+            <h1>🎣 Mi Pesca RD</h1>
+            <p>Cargando...</p>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="/js/db.js"></script>
+    <script src="/js/geolocation.js"></script>
+    <script src="/js/api.js"></script>
+    <script src="/js/sync.js"></script>
+    <script src="/js/components/home.js"></script>
+    <script src="/js/components/species-selector.js"></script>
+    <script src="/js/components/capture-form.js"></script>
+    <script src="/js/components/confirmation.js"></script>
+    <script src="/js/components/history.js"></script>
+    <script src="/js/app.js"></script>
+
+    <!-- Register Service Worker -->
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(registration => {
+                        console.log('Service Worker registered:', registration);
+                    })
+                    .catch(error => {
+                        console.log('Service Worker registration failed:', error);
+                    });
+            });
+        }
+    </script>
+</body>
+
+</html>

static/js/api.js

@@ -0,0 +1,66 @@
+/**
+ * API Service for backend communication
+ * Migrated from Angular api.service.ts
+ */
+
+const apiService = {
+    baseUrl: window.location.origin,
+
+    /**
+     * Fetch wrapper with error handling
+     */
+    async request(endpoint, options = {}) {
+        try {
+            const response = await fetch(`${this.baseUrl}${endpoint}`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...options.headers
+                },
+                ...options
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('API request failed:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Get species list from backend
+     */
+    async getSpecies() {
+        return await this.request('/api/species');
+    },
+
+    /**
+     * Send a capture to the backend
+     */
+    async sendCapture(capture) {
+        return await this.request('/api/captures', {
+            method: 'POST',
+            body: JSON.stringify(capture)
+        });
+    },
+
+    /**
+     * Batch sync multiple captures
+     */
+    async syncCaptures(captures) {
+        return await this.request('/api/sync', {
+            method: 'POST',
+            body: JSON.stringify({ captures })
+        });
+    },
+
+    /**
+     * Check if online
+     */
+    isOnline() {
+        return navigator.onLine;
+    }
+};

static/js/app.js

@@ -0,0 +1,79 @@
+/**
+ * Main Application
+ * SPA Router and State Management
+ */
+
+const app = {
+    currentRoute: 'home',
+    currentComponent: null,
+    state: {},
+
+    routes: {
+        'home': HomeComponent,
+        'species-selector': SpeciesSelectorComponent,
+        'capture-form': CaptureFormComponent,
+        'confirmation': ConfirmationComponent,
+        'history': HistoryComponent
+    },
+
+    /**
+     * Initialize the application
+     */
+    async init() {
+        console.log('Initializing Mi Pesca RD...');
+
+        // Initialize sync service
+        syncService.init();
+
+        // Load initial route
+        this.navigate('home');
+    },
+
+    /**
+     * Navigate to a route
+     */
+    async navigate(route) {
+        if (!this.routes[route]) {
+            console.error(`Route not found: ${route}`);
+            return;
+        }
+
+        // Destroy previous component
+        if (this.currentComponent && this.currentComponent.destroy) {
+            this.currentComponent.destroy();
+        }
+
+        // Update current route
+        this.currentRoute = route;
+        this.currentComponent = this.routes[route];
+
+        // Initialize component
+        if (this.currentComponent.init) {
+            await this.currentComponent.init();
+        }
+
+        // Render component
+        this.render();
+    },
+
+    /**
+     * Render current component
+     */
+    render() {
+        const appContainer = document.getElementById('app');
+
+        if (!appContainer) {
+            console.error('App container not found');
+            return;
+        }
+
+        if (this.currentComponent && this.currentComponent.render) {
+            appContainer.innerHTML = this.currentComponent.render();
+        }
+    }
+};
+
+// Initialize app when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    app.init();
+});

static/js/components/capture-form.js

@@ -0,0 +1,176 @@
+/**
+ * Capture Form Component
+ * Data entry form for capture details
+ */
+
+const CaptureFormComponent = {
+    captureData: null,
+    location: null,
+
+    render() {
+        const selectedSpecies = app.state.selectedSpecies || [];
+
+        return `
+            <div class="nav">
+                <button class="nav-back" onclick="app.navigate('species-selector')">←</button>
+                <h1>Detalles de Captura</h1>
+            </div>
+            
+            <div class="content">
+                <div class="card">
+                    <h3>📍 Ubicación</h3>
+                    <p id="location-status">Obteniendo ubicación GPS...</p>
+                </div>
+                
+                <form id="capture-form" onsubmit="CaptureFormComponent.submit(event)">
+                    ${selectedSpecies.map((speciesId, index) => `
+                        <div class="card">
+                            <h3>${this.getSpeciesName(speciesId)}</h3>
+                            
+                            <div class="form-group">
+                                <label for="quantity-${index}">Cantidad</label>
+                                <input 
+                                    type="number" 
+                                    id="quantity-${index}" 
+                                    name="quantity-${index}"
+                                    min="0.1"
+                                    step="0.1"
+                                    required
+                                >
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="unit-${index}">Unidad</label>
+                                <select id="unit-${index}" name="unit-${index}" required>
+                                    <option value="lbs">Libras (lbs)</option>
+                                    <option value="units">Unidades</option>
+                                </select>
+                            </div>
+                        </div>
+                    `).join('')}
+                    
+                    <div class="card">
+                        <div class="form-group">
+                            <label for="fishing-method">Método de Pesca</label>
+                            <select id="fishing-method" name="fishing-method" required>
+                                <option value="">Seleccionar...</option>
+                                <option value="Línea de mano">Línea de mano</option>
+                                <option value="Nasa">Nasa</option>
+                                <option value="Red de enmalle">Red de enmalle</option>
+                                <option value="Palangre">Palangre</option>
+                                <option value="Buceo">Buceo</option>
+                                <option value="Otro">Otro</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="depth">Profundidad (Brazadas)</label>
+                            <input 
+                                type="number" 
+                                id="depth" 
+                                name="depth"
+                                min="0"
+                                step="1"
+                                required
+                            >
+                        </div>
+                    </div>
+                    
+                    <button type="submit" class="btn-primary btn-full">
+                        Guardar Captura
+                    </button>
+                </form>
+            </div>
+        `;
+    },
+
+    async init() {
+        // Get GPS location
+        try {
+            this.location = await geolocationService.getCurrentPosition();
+
+            const locationStatus = document.getElementById('location-status');
+            if (locationStatus) {
+                locationStatus.innerHTML = `
+                    ✅ Ubicación obtenida<br>
+                    <small>Lat: ${this.location.latitude.toFixed(6)}, Lon: ${this.location.longitude.toFixed(6)}</small>
+                `;
+            }
+        } catch (error) {
+            console.error('Error getting location:', error);
+            const locationStatus = document.getElementById('location-status');
+            if (locationStatus) {
+                locationStatus.innerHTML = `❌ ${error.message}`;
+            }
+        }
+    },
+
+    getSpeciesName(speciesId) {
+        const species = SpeciesSelectorComponent.allSpecies.find(s => s.id === speciesId);
+        return species ? species.commonName : speciesId;
+    },
+
+    async submit(event) {
+        event.preventDefault();
+
+        if (!this.location) {
+            alert('No se pudo obtener la ubicación GPS. Por favor, intenta de nuevo.');
+            return;
+        }
+
+        const selectedSpecies = app.state.selectedSpecies || [];
+        const items = [];
+
+        // Collect data for each species
+        selectedSpecies.forEach((speciesId, index) => {
+            const quantity = parseFloat(document.getElementById(`quantity-${index}`).value);
+            const unit = document.getElementById(`unit-${index}`).value;
+
+            items.push({
+                speciesId: speciesId,
+                quantity: quantity,
+                unit: unit
+            });
+        });
+
+        // Create capture object
+        const capture = {
+            id: this.generateUUID(),
+            timestamp: new Date().toISOString(),
+            latitude: this.location.latitude,
+            longitude: this.location.longitude,
+            species: selectedSpecies,
+            items: items,
+            fishingMethod: document.getElementById('fishing-method').value,
+            depth: parseFloat(document.getElementById('depth').value),
+            synced: false
+        };
+
+        // Save to IndexedDB
+        try {
+            await dbService.addCapture(capture);
+
+            // Store in app state for confirmation
+            app.state.lastCapture = capture;
+
+            // Navigate to confirmation
+            app.navigate('confirmation');
+
+            // Trigger sync if online
+            if (navigator.onLine) {
+                syncService.syncNow();
+            }
+        } catch (error) {
+            console.error('Error saving capture:', error);
+            alert('Error al guardar la captura. Por favor, intenta de nuevo.');
+        }
+    },
+
+    generateUUID() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            const r = Math.random() * 16 | 0;
+            const v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+};

static/js/components/confirmation.js

@@ -0,0 +1,100 @@
+/**
+ * Confirmation Component
+ * Shows capture summary after submission
+ */
+
+const ConfirmationComponent = {
+    render() {
+        const capture = app.state.lastCapture;
+
+        if (!capture) {
+            return `
+                <div class="nav">
+                    <h1>Confirmación</h1>
+                </div>
+                <div class="content">
+                    <div class="card">
+                        <p>No hay datos de captura.</p>
+                    </div>
+                    <button class="btn-primary btn-full" onclick="app.navigate('home')">
+                        Volver al Inicio
+                    </button>
+                </div>
+            `;
+        }
+
+        return `
+            <div class="nav">
+                <h1>✅ Captura Registrada</h1>
+            </div>
+            
+            <div class="content">
+                <div class="card">
+                    <h2 style="color: var(--secondary-color); text-align: center;">
+                        ¡Captura guardada exitosamente!
+                    </h2>
+                    <p class="text-center">
+                        ${capture.synced ? '✅ Sincronizada con el servidor' : '⏳ Se sincronizará cuando haya conexión'}
+                    </p>
+                </div>
+                
+                <div class="card confirmation-details">
+                    <h3>Resumen de Captura</h3>
+                    
+                    <dl>
+                        <dt>📅 Fecha y Hora</dt>
+                        <dd>${this.formatDate(capture.timestamp)}</dd>
+                        
+                        <dt>📍 Ubicación</dt>
+                        <dd>
+                            Lat: ${capture.latitude.toFixed(6)}<br>
+                            Lon: ${capture.longitude.toFixed(6)}
+                        </dd>
+                        
+                        <dt>🐟 Especies</dt>
+                        <dd>
+                            ${capture.items.map(item => `
+                                ${this.getSpeciesName(item.speciesId)}: 
+                                ${item.quantity} ${item.unit === 'lbs' ? 'libras' : 'unidades'}
+                            `).join('<br>')}
+                        </dd>
+                        
+                        <dt>🎣 Método de Pesca</dt>
+                        <dd>${capture.fishingMethod}</dd>
+                        
+                        <dt>📏 Profundidad</dt>
+                        <dd>${capture.depth} brazadas</dd>
+                    </dl>
+                </div>
+                
+                <button class="btn-primary btn-full" onclick="app.navigate('home')">
+                    🏠 Volver al Inicio
+                </button>
+                
+                <button class="btn-secondary btn-full" onclick="app.navigate('species-selector')">
+                    ➕ Registrar Otra Captura
+                </button>
+            </div>
+        `;
+    },
+
+    init() {
+        // Component initialized
+    },
+
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleString('es-DO', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    },
+
+    getSpeciesName(speciesId) {
+        const species = SpeciesSelectorComponent.allSpecies.find(s => s.id === speciesId);
+        return species ? species.commonName : speciesId;
+    }
+};

static/js/components/history.js

@@ -0,0 +1,96 @@
+/**
+ * History Component
+ * Display list of saved captures
+ */
+
+const HistoryComponent = {
+    captures: [],
+
+    render() {
+        return `
+            <div class="nav">
+                <button class="nav-back" onclick="app.navigate('home')">←</button>
+                <h1>Historial de Capturas</h1>
+            </div>
+            
+            <div class="content">
+                <div class="card">
+                    <p><strong>${this.captures.length}</strong> captura(s) registrada(s)</p>
+                </div>
+                
+                ${this.captures.length === 0 ? `
+                    <div class="card text-center">
+                        <p>No hay capturas registradas aún.</p>
+                        <button class="btn-primary" onclick="app.navigate('species-selector')">
+                            ➕ Registrar Primera Captura
+                        </button>
+                    </div>
+                ` : `
+                    <ul class="history-list">
+                        ${this.renderCapturesList()}
+                    </ul>
+                `}
+            </div>
+        `;
+    },
+
+    renderCapturesList() {
+        return this.captures
+            .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
+            .map(capture => `
+                <li class="history-item ${capture.synced ? 'synced' : 'unsynced'}">
+                    <h3>
+                        ${this.formatDate(capture.timestamp)}
+                        ${capture.synced ? '✅' : '⏳'}
+                    </h3>
+                    
+                    <p>
+                        <strong>Especies:</strong> 
+                        ${capture.items.map(item =>
+                `${this.getSpeciesName(item.speciesId)} (${item.quantity} ${item.unit === 'lbs' ? 'lbs' : 'unidades'})`
+            ).join(', ')}
+                    </p>
+                    
+                    <p>
+                        <strong>Método:</strong> ${capture.fishingMethod} | 
+                        <strong>Profundidad:</strong> ${capture.depth} brazadas
+                    </p>
+                    
+                    <p>
+                        <strong>Ubicación:</strong> 
+                        ${capture.latitude.toFixed(4)}, ${capture.longitude.toFixed(4)}
+                    </p>
+                    
+                    <p style="font-size: 0.85rem; color: #666;">
+                        ${capture.synced ?
+                    `Sincronizada: ${this.formatDate(capture.syncedAt)}` :
+                    'Pendiente de sincronización'
+                }
+                    </p>
+                </li>
+            `).join('');
+    },
+
+    async init() {
+        // Load all captures from IndexedDB
+        this.captures = await dbService.getAllCaptures();
+    },
+
+    formatDate(dateString) {
+        if (!dateString) return 'N/A';
+
+        const date = new Date(dateString);
+        return date.toLocaleString('es-DO', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    },
+
+    getSpeciesName(speciesId) {
+        const species = SpeciesSelectorComponent.allSpecies.find(s => s.id === speciesId);
+        return species ? species.commonName : speciesId;
+    }
+};

static/js/components/home.js

@@ -0,0 +1,89 @@
+/**
+ * Home Component
+ * Main dashboard view
+ */
+
+const HomeComponent = {
+    render() {
+        return `
+            <div class="nav">
+                <h1>🎣 Mi Pesca RD</h1>
+            </div>
+            
+            <div id="status-bar" class="status-bar">
+                <span id="online-status"></span>
+            </div>
+            
+            <div class="content">
+                <div class="card">
+                    <h2>Bienvenido</h2>
+                    <p>Registra tus capturas de forma rápida y sencilla. Los datos se guardan localmente y se sincronizan automáticamente cuando tengas conexión.</p>
+                </div>
+                
+                <button class="btn-primary btn-full" onclick="app.navigate('species-selector')">
+                    ➕ Nueva Captura
+                </button>
+                
+                <button class="btn-secondary btn-full" onclick="app.navigate('history')">
+                    📋 Ver Historial
+                </button>
+                
+                <div class="card">
+                    <h3>Estado de Sincronización</h3>
+                    <p id="sync-info">Cargando...</p>
+                    <button class="btn-secondary" onclick="syncService.syncNow()" id="sync-btn">
+                        🔄 Sincronizar Ahora
+                    </button>
+                </div>
+            </div>
+        `;
+    },
+
+    async init() {
+        await this.updateSyncStatus();
+
+        // Update status every 5 seconds
+        this.statusInterval = setInterval(() => {
+            this.updateOnlineStatus();
+        }, 5000);
+
+        // Listen for sync events
+        window.addEventListener('syncComplete', () => {
+            this.updateSyncStatus();
+        });
+    },
+
+    updateOnlineStatus() {
+        const statusEl = document.getElementById('online-status');
+        if (statusEl) {
+            if (navigator.onLine) {
+                statusEl.innerHTML = '🟢 En línea';
+                statusEl.className = 'status-online';
+            } else {
+                statusEl.innerHTML = '🔴 Sin conexión';
+                statusEl.className = 'status-offline';
+            }
+        }
+    },
+
+    async updateSyncStatus() {
+        this.updateOnlineStatus();
+
+        const status = await syncService.getSyncStatus();
+        const syncInfo = document.getElementById('sync-info');
+
+        if (syncInfo) {
+            if (status.unsyncedCount === 0) {
+                syncInfo.innerHTML = '✅ Todas las capturas sincronizadas';
+            } else {
+                syncInfo.innerHTML = `⚠️ ${status.unsyncedCount} captura(s) pendiente(s) de sincronizar`;
+            }
+        }
+    },
+
+    destroy() {
+        if (this.statusInterval) {
+            clearInterval(this.statusInterval);
+        }
+    }
+};

static/js/components/species-selector.js

@@ -0,0 +1,102 @@
+/**
+ * Species Selector Component
+ * Visual species picker with images
+ */
+
+const SpeciesSelectorComponent = {
+    selectedSpecies: [],
+    allSpecies: [],
+
+    render() {
+        return `
+            <div class="nav">
+                <button class="nav-back" onclick="app.navigate('home')">←</button>
+                <h1>Seleccionar Especies</h1>
+            </div>
+            
+            <div class="content">
+                <div class="card">
+                    <p>Selecciona las especies capturadas (puedes elegir varias):</p>
+                    <p><strong>${this.selectedSpecies.length}</strong> especie(s) seleccionada(s)</p>
+                </div>
+                
+                <div id="species-grid" class="species-grid">
+                    ${this.renderSpeciesGrid()}
+                </div>
+                
+                <button 
+                    class="btn-primary btn-full" 
+                    onclick="SpeciesSelectorComponent.continue()"
+                    ${this.selectedSpecies.length === 0 ? 'disabled' : ''}
+                >
+                    Continuar →
+                </button>
+            </div>
+        `;
+    },
+
+    renderSpeciesGrid() {
+        if (this.allSpecies.length === 0) {
+            return '<p>Cargando especies...</p>';
+        }
+
+        return this.allSpecies.map(species => {
+            const isSelected = this.selectedSpecies.includes(species.id);
+            const isProtected = species.protected;
+            const hasVeda = species.closedSeason;
+
+            return `
+                <div 
+                    class="species-card ${isSelected ? 'selected' : ''} ${isProtected ? 'protected' : ''}"
+                    onclick="SpeciesSelectorComponent.toggleSpecies('${species.id}')"
+                >
+                    <img src="${species.imageUrl}" alt="${species.commonName}" onerror="this.src='/assets/species/placeholder.jpg'">
+                    <h3>${species.commonName}</h3>
+                    <p style="font-size: 0.8rem; color: #666; margin: 0;">${species.scientificName}</p>
+                    ${isProtected ? '<span class="badge badge-protected">PROTEGIDA</span>' : ''}
+                    ${hasVeda ? '<span class="badge badge-veda">VEDA</span>' : ''}
+                </div>
+            `;
+        }).join('');
+    },
+
+    async init() {
+        this.selectedSpecies = [];
+
+        // Load species from IndexedDB
+        let species = await dbService.getAllSpecies();
+
+        // If no species in DB, fetch from API
+        if (species.length === 0) {
+            try {
+                species = await apiService.getSpecies();
+                await dbService.saveSpecies(species);
+            } catch (error) {
+                console.error('Error loading species:', error);
+            }
+        }
+
+        this.allSpecies = species;
+    },
+
+    toggleSpecies(speciesId) {
+        const index = this.selectedSpecies.indexOf(speciesId);
+
+        if (index > -1) {
+            this.selectedSpecies.splice(index, 1);
+        } else {
+            this.selectedSpecies.push(speciesId);
+        }
+
+        // Re-render
+        app.render();
+    },
+
+    continue() {
+        if (this.selectedSpecies.length > 0) {
+            // Store selected species in app state
+            app.state.selectedSpecies = [...this.selectedSpecies];
+            app.navigate('capture-form');
+        }
+    }
+};

static/js/db.js

@@ -0,0 +1,68 @@
+/**
+ * IndexedDB Database Service using Dexie.js
+ * Migrated from Angular db.service.ts
+ */
+
+const db = new Dexie('MiPescaDB');
+
+// Define database schema
+db.version(1).stores({
+    captures: 'id, timestamp, synced',
+    species: 'id, commonName, category'
+});
+
+// Database operations
+const dbService = {
+    /**
+     * Add a new capture to the database
+     */
+    async addCapture(capture) {
+        return await db.captures.add(capture);
+    },
+
+    /**
+     * Get all captures
+     */
+    async getAllCaptures() {
+        return await db.captures.toArray();
+    },
+
+    /**
+     * Get unsynced captures
+     */
+    async getUnsyncedCaptures() {
+        return await db.captures.where('synced').equals(false).toArray();
+    },
+
+    /**
+     * Update sync status of a capture
+     */
+    async updateSyncStatus(id, synced) {
+        return await db.captures.update(id, {
+            synced: synced,
+            syncedAt: new Date()
+        });
+    },
+
+    /**
+     * Save species list to database
+     */
+    async saveSpecies(speciesList) {
+        return await db.species.bulkPut(speciesList);
+    },
+
+    /**
+     * Get all species
+     */
+    async getAllSpecies() {
+        return await db.species.toArray();
+    },
+
+    /**
+     * Clear all data (for testing)
+     */
+    async clearAll() {
+        await db.captures.clear();
+        await db.species.clear();
+    }
+};

static/js/geolocation.js

@@ -0,0 +1,89 @@
+/**
+ * Geolocation Service
+ * Migrated from Angular geolocation.service.ts
+ */
+
+const geolocationService = {
+    /**
+     * Get current GPS coordinates
+     */
+    async getCurrentPosition() {
+        return new Promise((resolve, reject) => {
+            if (!navigator.geolocation) {
+                reject(new Error('Geolocation no está soportada por este navegador'));
+                return;
+            }
+
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    resolve({
+                        latitude: position.coords.latitude,
+                        longitude: position.coords.longitude,
+                        accuracy: position.coords.accuracy,
+                        timestamp: new Date(position.timestamp)
+                    });
+                },
+                (error) => {
+                    let errorMessage = 'Error obteniendo ubicación';
+
+                    switch (error.code) {
+                        case error.PERMISSION_DENIED:
+                            errorMessage = 'Permiso de ubicación denegado';
+                            break;
+                        case error.POSITION_UNAVAILABLE:
+                            errorMessage = 'Ubicación no disponible';
+                            break;
+                        case error.TIMEOUT:
+                            errorMessage = 'Tiempo de espera agotado';
+                            break;
+                    }
+
+                    reject(new Error(errorMessage));
+                },
+                {
+                    enableHighAccuracy: true,
+                    timeout: 10000,
+                    maximumAge: 0
+                }
+            );
+        });
+    },
+
+    /**
+     * Watch position for continuous tracking
+     */
+    watchPosition(onSuccess, onError) {
+        if (!navigator.geolocation) {
+            onError(new Error('Geolocation no está soportada'));
+            return null;
+        }
+
+        return navigator.geolocation.watchPosition(
+            (position) => {
+                onSuccess({
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude,
+                    accuracy: position.coords.accuracy,
+                    timestamp: new Date(position.timestamp)
+                });
+            },
+            (error) => {
+                onError(error);
+            },
+            {
+                enableHighAccuracy: true,
+                timeout: 10000,
+                maximumAge: 0
+            }
+        );
+    },
+
+    /**
+     * Clear position watch
+     */
+    clearWatch(watchId) {
+        if (watchId && navigator.geolocation) {
+            navigator.geolocation.clearWatch(watchId);
+        }
+    }
+};

static/js/sync.js

@@ -0,0 +1,103 @@
+/**
+ * Synchronization Service
+ * Migrated from Angular sync.service.ts
+ * Handles offline-online data synchronization
+ */
+
+const syncService = {
+    isSyncing: false,
+    syncInterval: null,
+
+    /**
+     * Initialize sync service
+     */
+    init() {
+        // Listen for online/offline events
+        window.addEventListener('online', () => {
+            console.log('Connection restored, syncing...');
+            this.syncNow();
+        });
+
+        window.addEventListener('offline', () => {
+            console.log('Connection lost, working offline');
+        });
+
+        // Auto-sync every 5 minutes when online
+        this.syncInterval = setInterval(() => {
+            if (navigator.onLine) {
+                this.syncNow();
+            }
+        }, 5 * 60 * 1000);
+
+        // Initial sync if online
+        if (navigator.onLine) {
+            this.syncNow();
+        }
+    },
+
+    /**
+     * Sync unsynced captures to backend
+     */
+    async syncNow() {
+        if (this.isSyncing || !navigator.onLine) {
+            return;
+        }
+
+        this.isSyncing = true;
+
+        try {
+            const unsyncedCaptures = await dbService.getUnsyncedCaptures();
+
+            if (unsyncedCaptures.length === 0) {
+                console.log('No captures to sync');
+                this.isSyncing = false;
+                return;
+            }
+
+            console.log(`Syncing ${unsyncedCaptures.length} captures...`);
+
+            const result = await apiService.syncCaptures(unsyncedCaptures);
+
+            // Update sync status for successfully synced captures
+            for (const id of result.synced) {
+                await dbService.updateSyncStatus(id, true);
+            }
+
+            console.log(`Successfully synced ${result.synced.length} captures`);
+
+            // Dispatch event for UI updates
+            window.dispatchEvent(new CustomEvent('syncComplete', {
+                detail: {
+                    synced: result.synced.length,
+                    errors: result.errors.length
+                }
+            }));
+
+        } catch (error) {
+            console.error('Sync failed:', error);
+        } finally {
+            this.isSyncing = false;
+        }
+    },
+
+    /**
+     * Get sync status
+     */
+    async getSyncStatus() {
+        const unsyncedCount = (await dbService.getUnsyncedCaptures()).length;
+        return {
+            isOnline: navigator.onLine,
+            isSyncing: this.isSyncing,
+            unsyncedCount: unsyncedCount
+        };
+    },
+
+    /**
+     * Stop sync service
+     */
+    stop() {
+        if (this.syncInterval) {
+            clearInterval(this.syncInterval);
+        }
+    }
+};

static/manifest.json

@@ -0,0 +1,29 @@
+{
+    "name": "Mi Pesca RD",
+    "short_name": "MiPesca",
+    "description": "Aplicación para registro de capturas pesqueras en República Dominicana",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#0D47A1",
+    "orientation": "portrait",
+    "icons": [
+        {
+            "src": "/assets/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/assets/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "categories": [
+        "productivity",
+        "utilities"
+    ],
+    "lang": "es-DO"
+}

static/sw.js

@@ -0,0 +1,131 @@
+/**
+ * Service Worker for PWA
+ * Handles offline functionality and caching
+ */
+
+const CACHE_NAME = 'mipesca-v1';
+const STATIC_CACHE = [
+    '/',
+    '/index.html',
+    '/css/styles.css',
+    '/js/app.js',
+    '/js/db.js',
+    '/js/geolocation.js',
+    '/js/api.js',
+    '/js/sync.js',
+    '/js/components/home.js',
+    '/js/components/species-selector.js',
+    '/js/components/capture-form.js',
+    '/js/components/confirmation.js',
+    '/js/components/history.js',
+    '/manifest.json',
+    'https://unpkg.com/dexie@3.2.4/dist/dexie.min.js'
+];
+
+// Install event - cache static assets
+self.addEventListener('install', (event) => {
+    console.log('Service Worker installing...');
+
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                console.log('Caching static assets');
+                return cache.addAll(STATIC_CACHE);
+            })
+            .then(() => self.skipWaiting())
+    );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    console.log('Service Worker activating...');
+
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        console.log('Deleting old cache:', cacheName);
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        }).then(() => self.clients.claim())
+    );
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', (event) => {
+    const { request } = event;
+    const url = new URL(request.url);
+
+    // API requests - network first, then cache
+    if (url.pathname.startsWith('/api/')) {
+        event.respondWith(
+            fetch(request)
+                .then((response) => {
+                    // Clone response to cache it
+                    const responseClone = response.clone();
+                    caches.open(CACHE_NAME).then((cache) => {
+                        cache.put(request, responseClone);
+                    });
+                    return response;
+                })
+                .catch(() => {
+                    // If network fails, try cache
+                    return caches.match(request);
+                })
+        );
+        return;
+    }
+
+    // Static assets - cache first, then network
+    event.respondWith(
+        caches.match(request)
+            .then((cachedResponse) => {
+                if (cachedResponse) {
+                    return cachedResponse;
+                }
+
+                return fetch(request)
+                    .then((response) => {
+                        // Don't cache non-successful responses
+                        if (!response || response.status !== 200 || response.type === 'error') {
+                            return response;
+                        }
+
+                        // Clone response to cache it
+                        const responseClone = response.clone();
+                        caches.open(CACHE_NAME).then((cache) => {
+                            cache.put(request, responseClone);
+                        });
+
+                        return response;
+                    });
+            })
+            .catch(() => {
+                // Return offline page if available
+                if (request.mode === 'navigate') {
+                    return caches.match('/index.html');
+                }
+            })
+    );
+});
+
+// Background sync for captures
+self.addEventListener('sync', (event) => {
+    if (event.tag === 'sync-captures') {
+        console.log('Background sync triggered');
+        event.waitUntil(
+            // Notify clients to sync
+            self.clients.matchAll().then((clients) => {
+                clients.forEach((client) => {
+                    client.postMessage({
+                        type: 'BACKGROUND_SYNC',
+                        action: 'sync-captures'
+                    });
+                });
+            })
+        );
+    }
+});

tsconfig.app.json

@@ -1,18 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": [
-      "node"
-    ]
-  },
-  "files": [
-    "src/main.ts",
-    "src/main.server.ts",
-    "server.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

tsconfig.json

@@ -1,32 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}