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

Sistema de gestion y monitoreo de infraestructura hidrica desarrollado con React, TypeScript y Vite.

Descripcion General

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

1. Clonar el repositorio

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

2. Instalar dependencias

npm install

3. 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

4. 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

Flujo de Login

1. Usuario ingresa credenciales
2. Validacion del checkbox "No soy un robot"
3. Token almacenado en localStorage (grh_auth)
4. 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

1. Fork del repositorio
2. Crear rama feature (git checkout -b feature/nueva-funcionalidad)
3. Commit de cambios (git commit -m 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. 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.