El Sistema de Gestion de Recursos Hidricos (GRH) es una aplicacion web frontend disenada para el monitoreo, administracion y control de infraestructura de toma de agua. Permite gestionar medidores, concentradores, proyectos, usuarios y roles a traves de una interfaz moderna y responsiva.

Caracteristicas Principales

Dashboard interactivo con KPIs, alertas e historial de actividades
Gestion de Medidores (Tomas de Agua) - CRUD completo con filtros por proyecto
Gestion de Concentradores - Configuracion de gateways LoRa/LoRaWAN
Gestion de Proyectos - Administracion de proyectos de infraestructura
Gestion de Usuarios y Roles - Control de acceso al sistema
Tema claro/oscuro - Personalizacion de la interfaz
Diseno responsive - Compatible con desktop, tablet y movil

Stack Tecnologico

Frontend

Tecnologia	Version	Proposito
React	18.2.0	Framework UI
TypeScript	5.2.2	Type safety
Vite	5.2.0	Build tool y dev server
Tailwind CSS	4.1.18	Estilos utility-first
Material-UI	7.3.6	Componentes UI
Recharts	3.6.0	Visualizacion de datos
Lucide React	0.559.0	Iconos SVG

Herramientas de Desarrollo

ESLint - Linting de codigo
TypeScript ESLint - Analisis estatico

Instalacion

Prerrequisitos

Node.js >= 18.x
npm >= 9.x o yarn >= 1.22

Pasos de Instalacion

Clonar el repositorio

git clone <url-del-repositorio>
cd water-project

Instalar dependencias

npm install

Configurar variables de entorno

cp .env.example .env

Editar el archivo .env:

VITE_API_BASE_URL=https://tu-api-url.com
VITE_API_TOKEN=tu-token-de-api

Iniciar servidor de desarrollo

npm run dev

La aplicacion estara disponible en http://localhost:5173

Scripts Disponibles

Comando	Descripcion
`npm run dev`	Inicia el servidor de desarrollo
`npm run build`	Compila TypeScript y genera build de produccion
`npm run preview`	Previsualiza el build de produccion
`npm run lint`	Ejecuta ESLint en el codigo

Estructura del Proyecto

water-project/
├── public/                          # Assets estaticos
│   └── grhWatermark.jpg
│
├── src/
│   ├── api/                        # Capa de comunicacion con API
│   │   ├── me.ts                   # Endpoints de perfil
│   │   ├── meters.ts               # CRUD de medidores
│   │   ├── concentrators.ts        # CRUD de concentradores
│   │   └── projects.ts             # CRUD de proyectos
│   │
│   ├── components/
│   │   ├── layout/                 # Componentes de layout
│   │   │   ├── Sidebar.tsx         # Menu lateral
│   │   │   ├── TopMenu.tsx         # Barra superior
│   │   │   └── common/             # Componentes reutilizables
│   │   │       ├── ProfileModal.tsx
│   │   │       ├── ConfirmModal.tsx
│   │   │       └── Watermark.tsx
│   │   └── SettingsModals.tsx
│   │
│   ├── pages/                      # Paginas principales
│   │   ├── Home.tsx                # Dashboard
│   │   ├── LoginPage.tsx           # Login
│   │   ├── UsersPage.tsx           # Gestion de usuarios
│   │   ├── RolesPage.tsx           # Gestion de roles
│   │   ├── projects/
│   │   │   └── ProjectsPage.tsx
│   │   ├── meters/                 # Modulo de medidores
│   │   │   ├── MeterPage.tsx
│   │   │   ├── useMeters.ts        # Hook personalizado
│   │   │   ├── MetersTable.tsx
│   │   │   ├── MetersModal.tsx
│   │   │   └── MetersSidebar.tsx
│   │   └── concentrators/          # Modulo de concentradores
│   │       ├── ConcentratorsPage.tsx
│   │       ├── useConcentrators.ts
│   │       ├── ConcentratorsTable.tsx
│   │       ├── ConcentratorsModal.tsx
│   │       └── ConcentratorsSidebar.tsx
│   │
│   ├── assets/
│   │   └── images/
│   │
│   ├── App.tsx                     # Componente raiz
│   ├── main.tsx                    # Punto de entrada
│   └── index.css                   # Estilos globales
│
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── .env.example

Modulos Funcionales

1. Dashboard (Home)

El dashboard principal ofrece:

Selector de organismos operadores (CESPT TIJUANA, TECATE, MEXICALI)
Grafico de barras: "Numero de Medidores por Proyecto"
Tarjetas de acceso rapido: Tomas, Alertas, Mantenimiento, Reportes
Historial reciente de actividades
Panel de ultimas alertas

2. Gestion de Medidores

Modulo completo para administrar medidores/tomas de agua:

Funcionalidades:

Listado con busqueda y filtros
Filtrado por proyecto
Tipos de toma: GENERAL, LORA, LORAWAN, GRANDES
CRUD completo (Crear, Leer, Actualizar, Eliminar)

Campos principales:

Area, Numero de cuenta, Usuario, Direccion
Serial del medidor, Nombre, Estado
Tipo de protocolo, Particion DMA
Configuracion de dispositivo (Device EUI, AppKey, etc.)

3. Gestion de Concentradores

Administracion de concentradores y gateways:

Funcionalidades:

Listado con filtros por proyecto
Configuracion de Gateway (ID, EUI, Nombre)
Seleccion de ubicacion de antena (Indoor/Outdoor)
CRUD completo

4. Gestion de Proyectos

Administracion de proyectos de infraestructura:

Tabla con busqueda integrada
Estados: ACTIVE/INACTIVE
Informacion de operador y tiempos

5. Gestion de Usuarios

Control de usuarios del sistema:

Listado de usuarios
Asignacion de roles
Estados: ACTIVE/INACTIVE

6. Gestion de Roles

Administracion de roles de acceso:

Roles predefinidos: SUPER_ADMIN, USER
Descripcion de permisos

API y Comunicacion

Configuracion

La aplicacion se conecta a una API REST externa. Configurar en .env:

VITE_API_BASE_URL=https://tu-api.com
VITE_API_TOKEN=tu-token

Endpoints Principales

Recurso	Endpoint Base
Medidores	`/api/v3/data/.../m4hzpnopjkppaav/records`
Concentradores	`/api/v3/data/.../mheif1vdgnyt8x2/records`
Proyectos	`/api/v3/data/.../m9882vn3xb31e29/records`

Estructura de Respuesta

interface ApiResponse<T> {
  records: Array<{
    id: string;
    fields: T;
  }>;
  next?: string;
  prev?: string;
}

Modelos de Datos

Meter (Medidor)

interface Meter {
  id: string;
  createdAt: string;
  updatedAt: string;
  areaName: string;
  accountNumber: string | null;
  userName: string | null;
  userAddress: string | null;
  meterSerialNumber: string;
  meterName: string;
  meterStatus: string;
  protocolType: string;
  priceNo: string | null;
  priceName: string | null;
  dmaPartition: string | null;
  supplyTypes: string;
  deviceId: string;
  deviceName: string;
  deviceType: string;
  usageAnalysisType: string;
  installedTime: string;
}

Concentrator

interface Concentrator {
  id: string;
  "Area Name": string;
  "Device S/N": string;
  "Device Name": string;
  "Device Time": string;
  "Device Status": string;
  "Operator": string;
  "Installed Time": string;
  "Communication Time": string;
  "Instruction Manual": string;
}

Project

interface Project {
  id: string;
  areaName: string;
  deviceSN: string;
  deviceName: string;
  deviceType: string;
  deviceStatus: "ACTIVE" | "INACTIVE";
  operator: string;
  installedTime: string;
  communicationTime: string;
}

Autenticacion

Usuario ingresa credenciales
Validacion del checkbox "No soy un robot"
Token almacenado en localStorage (grh_auth)
Redireccion al Dashboard

Almacenamiento

// localStorage keys
grh_auth: { token: string, ts: number }
water_project_settings_v1: { theme: string, compactMode: boolean }

Configuracion de Temas

El sistema soporta tres modos de tema:

Sistema - Detecta preferencia del OS
Claro - Tema light
Oscuro - Tema dark

Configuracion persistida en localStorage bajo water_project_settings_v1.

Despliegue

Build de Produccion

npm run build

Los archivos compilados se generan en la carpeta dist/.

Configuracion de Vite

El servidor de desarrollo esta configurado para:

Puerto: 5173
Host: habilitado para acceso remoto
Hosts permitidos: localhost, 127.0.0.1, dominios personalizados

Contribucion

Fork del repositorio
Crear rama feature (git checkout -b feature/nueva-funcionalidad)
Commit de cambios (git commit -m 'Agregar nueva funcionalidad')
Push a la rama (git push origin feature/nueva-funcionalidad)
Crear Pull Request

Licencia

Este proyecto es privado y pertenece a GRH - Gestion de Recursos Hidricos.

Contacto

Para soporte o consultas sobre el sistema, contactar al equipo de desarrollo.

README.md

Water Project - Sistema de Gestion de Recursos Hidricos (GRH)

Descripcion General