☀️ SolarM

Aplicación web para la gestión y monitorización de plantas solares fotovoltaicas. Permite registrar plantas, visualizar su ubicación en un mapa interactivo, consultar el historial de producción/consumo energético y administrar los datos desde un panel CRUD completo.

🛠️ Tecnologías

Capa	Tecnología
Frontend	Angular 21 (standalone components, zoneless change detection, Signal Forms, resource() API, linkedSignal, computed, effect)
Backend / BaaS	Supabase — Auth, Database (PostgreSQL), Storage
Mapas	Leaflet.js con OpenStreetMap
Estilos	CSS puro con glassmorphism, animaciones CSS y diseño responsive
Iconos	Font Awesome 6 (CDN)

✨ Funcionalidades

• Autenticación: Registro con subida de foto de perfil, login con validación y mensaje de error, logout.
• Perfil de usuario: Editar nombre, avatar (URL o subida de archivo) y cambiar contraseña.
• Listado de plantas: Grid de tarjetas con búsqueda por nombre, paginación (ver 4 / ver todas), navegación a detalle.
• Detalle de planta: Imagen con View Transitions API, información (coordenadas, capacidad), tabla de registros históricos de producción y consumo.
• Mapa interactivo: Marcadores personalizados con foto circular de cada planta, popups con información y navegación al detalle.
• Panel de administración: Tabla de todas las plantas con acciones de editar/eliminar + formulario CRUD con validación, toggle de favorito y subida de foto.
• Diseño responsive: Adaptado a móvil (≤425px), tablet (426–768px) y escritorio.
• Animaciones: Entrada escalonada de elementos (bottomIn, topIn, leftIn, rightIn), hover con brillo, transiciones de vista.

📁 Estructura del Proyecto

src/
├── index.html                  # Shell HTML + Font Awesome CDN
├── main.ts                     # Bootstrap de Angular
├── styles.css                  # Estilos globales (969 líneas)
├── environments/
│   └── environment.ts          # Claves de Supabase
└── app/
    ├── app.ts / html / css     # Componente raíz
    ├── app.config.ts           # Configuración (zoneless, router, Supabase)
    ├── app.routes.ts           # Rutas + guards (authGuard, guestGuard)
    ├── interfaces/             # Planta, Registre, RegisterData, etc.
    ├── services/
    │   ├── supaservice.ts      # Servicio principal (auth, CRUD, storage, resources)
    │   └── register-service.ts # Generación de registros simulados (RxJS interval)
    └── components/
        ├── header/             # Navegación + dropdown de usuario
        ├── home/               # Landing page con hero
        ├── login/              # Login con Reactive Forms + error de credenciales
        ├── register/           # Registro con Signal Forms + upload diferido
        ├── profile/            # Edición de perfil + cambio de contraseña
        └── plantes/
            ├── plantes-list/           # Grid de tarjetas con búsqueda
            ├── plantes-detail/         # Detalle + tabla de registros
            ├── plantes-map/            # Mapa Leaflet
            ├── plantes-table/          # Tabla administrativa
            ├── administrador-plantes/  # Contenedor admin (tabla + formulario)
            └── administrador-plantes-formulari/  # Formulario CRUD

🚀 Instalación y Ejecución

# Clonar el repositorio
git clone <url-del-repositorio>
cd solarM

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
ng serve

La aplicación estará disponible en http://localhost:4200/.

Configuración de Supabase

Configura tus claves en src/environments/environment.ts:

export const environment = {
  supabaseUrl: 'https://TU_PROYECTO.supabase.co',
  supabaseKey: 'TU_ANON_KEY',
};

Tablas necesarias en Supabase:

• plantes: id, nom, ubicacio (JSON con latitude/longitude), capacitat, usuario, foto, favorite
• registres: id, created_at, planta_id, generacio, consum

Bucket de Storage:

• fotos: Bucket público para las imágenes de plantas y avatares de usuario

🧪 Tests

ng test

📸 UI

Home

Login

Registro

Listado de Plantas

Detalle de Planta

Mapa

Panel de Administración

Perfil de Usuario