Migrar backend a PostgreSQL + Node.js/Express con nuevas funcionalidades

Backend (water-api/):
- Crear API REST completa con Express + TypeScript
- Implementar autenticación JWT con refresh tokens
- CRUD completo para: projects, concentrators, meters, gateways, devices, users, roles
- Agregar validación con Zod para todas las entidades
- Implementar webhooks para The Things Stack (LoRaWAN)
- Agregar endpoint de lecturas con filtros y resumen de consumo
- Implementar carga masiva de medidores via Excel (.xlsx)

Frontend:
- Crear cliente HTTP con manejo automático de JWT y refresh
- Actualizar todas las APIs para usar nuevo backend
- Agregar sistema de autenticación real (login, logout, me)
- Agregar selector de tipo (LORA, LoRaWAN, Grandes) en concentradores y medidores
- Agregar campo Meter ID en medidores
- Crear modal de carga masiva para medidores
- Agregar página de consumo con gráficas y filtros
- Corregir carga de proyectos independiente de datos existentes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/App.tsx

@@ -8,6 +8,7 @@ import ConcentratorsPage from "./pages/concentrators/ConcentratorsPage";
 import ProjectsPage from "./pages/projects/ProjectsPage";
 import UsersPage from "./pages/UsersPage";
 import RolesPage from "./pages/RolesPage";
+import ConsumptionPage from "./pages/consumption/ConsumptionPage";
 import ProfileModal from "./components/layout/common/ProfileModal";
 import { updateMyProfile } from "./api/me";
 
@@ -18,7 +19,15 @@ import SettingsModal, {
 
 import LoginPage from "./pages/LoginPage";
 
-// ✅ NUEVO
+// Auth imports
+import {
+  isAuthenticated,
+  getMe,
+  logout as authLogout,
+  clearAuth,
+  type AuthUser,
+} from "./api/auth";
+
 import ConfirmModal from "./components/layout/common/ConfirmModal";
 import Watermark from "./components/layout/common/Watermark";
 
@@ -27,28 +36,59 @@ export type Page =
   | "projects"
   | "meters"
   | "concentrators"
+  | "consumption"
   | "users"
   | "roles";
 
-const AUTH_KEY = "grh_auth";
-
 export default function App() {
-  const [isAuth, setIsAuth] = useState<boolean>(() => {
-    return Boolean(localStorage.getItem(AUTH_KEY));
-  });
+  const [isAuth, setIsAuth] = useState<boolean>(false);
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [authLoading, setAuthLoading] = useState(true);
 
-  const handleLogin = (payload?: { token?: string }) => {
-    localStorage.setItem(
-      AUTH_KEY,
-      JSON.stringify({ token: payload?.token ?? "demo", ts: Date.now() })
-    );
-    setIsAuth(true);
+  // Check authentication on mount
+  useEffect(() => {
+    const checkAuth = async () => {
+      if (isAuthenticated()) {
+        try {
+          const userData = await getMe();
+          setUser(userData);
+          setIsAuth(true);
+        } catch {
+          clearAuth();
+          setIsAuth(false);
+          setUser(null);
+        }
+      }
+      setAuthLoading(false);
+    };
+    checkAuth();
+  }, []);
+
+  const handleLogin = () => {
+    // After successful login, fetch user data
+    const fetchUser = async () => {
+      try {
+        const userData = await getMe();
+        setUser(userData);
+        setIsAuth(true);
+      } catch {
+        clearAuth();
+        setIsAuth(false);
+      }
+    };
+    fetchUser();
   };
 
-  const handleLogout = () => {
-    localStorage.removeItem(AUTH_KEY);
+  const handleLogout = async () => {
+    try {
+      await authLogout();
+    } catch {
+      // Ignore logout errors
+    }
+    clearAuth();
+    setUser(null);
     setIsAuth(false);
-    // opcional: reset de navegación
+    // Reset navigation
     setPage("home");
     setSubPage("default");
     setSelectedProject("");
@@ -65,13 +105,6 @@ export default function App() {
   const [profileOpen, setProfileOpen] = useState(false);
   const [savingProfile, setSavingProfile] = useState(false);
 
-  const [user, setUser] = useState({
-    name: "CESPT Admin",
-    email: "admin@cespt.gob.mx",
-    avatarUrl: null as string | null,
-    organismName: "CESPT",
-  });
-
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settings, setSettings] = useState<AppSettings>(() => loadSettings());
 
@@ -84,7 +117,7 @@ export default function App() {
   const handleUploadAvatar = async (file: File) => {
     const base64 = await fileToBase64(file);
     localStorage.setItem("mock_avatar", base64);
-    setUser((prev) => ({ ...prev, avatarUrl: base64 }));
+    setUser((prev) => prev ? { ...prev, avatar_url: base64 } : null);
   };
 
   function fileToBase64(file: File) {
@@ -101,18 +134,17 @@ export default function App() {
     email: string;
     organismName?: string;
   }) => {
+    if (!user) return;
     setSavingProfile(true);
     try {
       const updated = await updateMyProfile(next);
 
-      setUser((prev) => ({
+      setUser((prev) => prev ? ({
         ...prev,
         name: updated.name ?? next.name ?? prev.name,
         email: updated.email ?? next.email ?? prev.email,
-        avatarUrl: updated.avatarUrl ?? prev.avatarUrl,
-        organismName:
-          updated.organismName ?? next.organismName ?? prev.organismName,
-      }));
+        avatar_url: updated.avatarUrl ?? prev.avatar_url,
+      }) : null);
 
       setProfileOpen(false);
     } finally {
@@ -141,6 +173,8 @@ export default function App() {
         return <MetersPage selectedProject={selectedProject} />;
       case "concentrators":
         return <ConcentratorsPage />;
+      case "consumption":
+        return <ConsumptionPage />;
       case "users":
         return <UsersPage />;
       case "roles":
@@ -159,6 +193,15 @@ export default function App() {
     }
   };
 
+  // Show loading while checking authentication
+  if (authLoading) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-slate-50">
+        <div className="text-slate-500">Cargando...</div>
+      </div>
+    );
+  }
+
   if (!isAuth) {
     return <LoginPage onSuccess={handleLogin} />;
   }
@@ -186,11 +229,10 @@ export default function App() {
             page={page}
             subPage={subPage}
             setSubPage={setSubPage}
-            userName={user.name}
-            userEmail={user.email}
-            avatarUrl={user.avatarUrl}
+            userName={user?.name ?? "Usuario"}
+            userEmail={user?.email ?? ""}
+            avatarUrl={user?.avatar_url ?? null}
             onOpenProfile={() => setProfileOpen(true)}
-            // ✅ en vez de cerrar, abrimos confirm modal
             onRequestLogout={() => setLogoutOpen(true)}
           />
         </div>
@@ -212,11 +254,11 @@ export default function App() {
       <ProfileModal
         open={profileOpen}
         loading={savingProfile}
-        avatarUrl={user.avatarUrl}
+        avatarUrl={user?.avatar_url ?? null}
         initial={{
-          name: user.name,
-          email: user.email,
-          organismName: user.organismName,
+          name: user?.name ?? "",
+          email: user?.email ?? "",
+          organismName: "",
         }}
         onClose={() => setProfileOpen(false)}
         onSave={handleSaveProfile}
@@ -236,7 +278,7 @@ export default function App() {
         onConfirm={async () => {
           setLoggingOut(true);
           try {
-            handleLogout();
+            await handleLogout();
             setLogoutOpen(false);
           } finally {
             setLoggingOut(false);

src/api/auth.ts

@@ -0,0 +1,331 @@
+/**
+ * Authentication API Module
+ * Handles login, logout, token refresh, and user session management
+ */
+
+import { apiClient } from './client';
+import { ApiError } from './types';
+
+// Storage keys for authentication tokens
+const ACCESS_TOKEN_KEY = 'grh_access_token';
+const REFRESH_TOKEN_KEY = 'grh_refresh_token';
+
+/**
+ * Login credentials interface
+ */
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+/**
+ * Authentication tokens interface
+ */
+export interface AuthTokens {
+  accessToken: string;
+  refreshToken: string;
+}
+
+/**
+ * Authenticated user interface
+ */
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  avatar_url?: string;
+}
+
+/**
+ * Login response combining tokens and user data
+ */
+export interface LoginResponse extends AuthTokens {
+  user: AuthUser;
+}
+
+/**
+ * Refresh token response
+ */
+export interface RefreshResponse {
+  accessToken: string;
+}
+
+/**
+ * Store authentication tokens in localStorage
+ * @param tokens - The tokens to store
+ */
+function storeTokens(tokens: AuthTokens): void {
+  try {
+    localStorage.setItem(ACCESS_TOKEN_KEY, tokens.accessToken);
+    localStorage.setItem(REFRESH_TOKEN_KEY, tokens.refreshToken);
+  } catch (error) {
+    console.error('Failed to store authentication tokens:', error);
+  }
+}
+
+/**
+ * Authenticate user with email and password
+ * @param credentials - The login credentials
+ * @returns Promise resolving to tokens and user data
+ */
+export async function login(credentials: LoginCredentials): Promise<LoginResponse> {
+  // Validate credentials
+  if (!credentials.email || !credentials.password) {
+    throw new ApiError('Email and password are required', 400);
+  }
+
+  const response = await apiClient.post<LoginResponse>(
+    '/api/auth/login',
+    credentials,
+    { skipAuth: true }
+  );
+
+  // Store tokens on successful login
+  if (response.accessToken && response.refreshToken) {
+    storeTokens({
+      accessToken: response.accessToken,
+      refreshToken: response.refreshToken,
+    });
+  }
+
+  return response;
+}
+
+/**
+ * Refresh the access token using the stored refresh token
+ * @returns Promise resolving to the new access token
+ */
+export async function refresh(): Promise<RefreshResponse> {
+  const refreshToken = getStoredTokens()?.refreshToken;
+
+  if (!refreshToken) {
+    throw new ApiError('No refresh token available', 401);
+  }
+
+  const response = await apiClient.post<RefreshResponse>(
+    '/api/auth/refresh',
+    { refreshToken },
+    { skipAuth: true }
+  );
+
+  // Update stored access token
+  if (response.accessToken) {
+    try {
+      localStorage.setItem(ACCESS_TOKEN_KEY, response.accessToken);
+    } catch (error) {
+      console.error('Failed to update access token:', error);
+    }
+  }
+
+  return response;
+}
+
+/**
+ * Log out the current user
+ * Clears tokens and optionally notifies the server
+ * @returns Promise resolving when logout is complete
+ */
+export async function logout(): Promise<void> {
+  try {
+    const refreshToken = getRefreshToken();
+    // Attempt to notify server about logout
+    // This allows the server to invalidate the refresh token
+    await apiClient.post('/api/auth/logout', { refreshToken }, {
+      skipAuth: false, // Include token so server knows which session to invalidate
+    });
+  } catch (error) {
+    // Continue with local logout even if server request fails
+    console.warn('Server logout request failed:', error);
+  } finally {
+    // Always clear local tokens
+    clearAuth();
+  }
+}
+
+/**
+ * Get the currently authenticated user's profile
+ * @returns Promise resolving to the user data
+ */
+export async function getMe(): Promise<AuthUser> {
+  return apiClient.get<AuthUser>('/api/auth/me');
+}
+
+/**
+ * Check if the user is currently authenticated
+ * Validates that an access token exists and is not obviously expired
+ * @returns boolean indicating authentication status
+ */
+export function isAuthenticated(): boolean {
+  const tokens = getStoredTokens();
+
+  if (!tokens?.accessToken) {
+    return false;
+  }
+
+  // Check if the token is a valid JWT and not expired
+  try {
+    const payload = parseJwtPayload(tokens.accessToken);
+
+    if (!payload) {
+      return false;
+    }
+
+    // Check if token has expired
+    if (payload.exp) {
+      const expirationTime = (payload.exp as number) * 1000; // Convert to milliseconds
+      const currentTime = Date.now();
+
+      // Consider token expired if less than 30 seconds remaining
+      if (currentTime >= expirationTime - 30000) {
+        return false;
+      }
+    }
+
+    return true;
+  } catch {
+    // If we can't parse the token, assume it's invalid
+    return false;
+  }
+}
+
+/**
+ * Get stored authentication tokens
+ * @returns The stored tokens or null if not found
+ */
+export function getStoredTokens(): AuthTokens | null {
+  try {
+    const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
+    const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
+
+    if (!accessToken || !refreshToken) {
+      return null;
+    }
+
+    return {
+      accessToken,
+      refreshToken,
+    };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Clear all authentication data from storage
+ */
+export function clearAuth(): void {
+  try {
+    localStorage.removeItem(ACCESS_TOKEN_KEY);
+    localStorage.removeItem(REFRESH_TOKEN_KEY);
+  } catch (error) {
+    console.error('Failed to clear authentication data:', error);
+  }
+}
+
+/**
+ * Parse JWT payload without verification
+ * Used for client-side token inspection (expiration check, etc.)
+ * @param token - The JWT token to parse
+ * @returns The parsed payload or null if invalid
+ */
+function parseJwtPayload(token: string): Record<string, unknown> | null {
+  try {
+    const parts = token.split('.');
+
+    if (parts.length !== 3) {
+      return null;
+    }
+
+    const payload = parts[1];
+
+    // Handle base64url encoding
+    const base64 = payload.replace(/-/g, '+').replace(/_/g, '/');
+
+    // Pad with '=' if necessary
+    const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+
+    const decoded = atob(padded);
+    return JSON.parse(decoded);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get the access token for external use
+ * Useful when other parts of the app need the raw token
+ * @returns The access token or null
+ */
+export function getAccessToken(): string | null {
+  try {
+    return localStorage.getItem(ACCESS_TOKEN_KEY);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get the refresh token for external use
+ * @returns The refresh token or null
+ */
+export function getRefreshToken(): string | null {
+  try {
+    return localStorage.getItem(REFRESH_TOKEN_KEY);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if the access token is about to expire (within threshold)
+ * @param thresholdMs - Time threshold in milliseconds (default: 5 minutes)
+ * @returns boolean indicating if token is expiring soon
+ */
+export function isTokenExpiringSoon(thresholdMs: number = 5 * 60 * 1000): boolean {
+  const tokens = getStoredTokens();
+
+  if (!tokens?.accessToken) {
+    return true;
+  }
+
+  try {
+    const payload = parseJwtPayload(tokens.accessToken);
+
+    if (!payload?.exp) {
+      return false; // Can't determine expiration, assume it's fine
+    }
+
+    const expirationTime = (payload.exp as number) * 1000;
+    const currentTime = Date.now();
+
+    return currentTime >= expirationTime - thresholdMs;
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Update user profile
+ * @param updates - The profile updates
+ * @returns Promise resolving to the updated user data
+ */
+export async function updateProfile(updates: Partial<Pick<AuthUser, 'name' | 'email'>>): Promise<AuthUser> {
+  return apiClient.patch<AuthUser>('/api/auth/me', updates);
+}
+
+/**
+ * Change user password
+ * @param currentPassword - The current password
+ * @param newPassword - The new password
+ * @returns Promise resolving when password is changed
+ */
+export async function changePassword(
+  currentPassword: string,
+  newPassword: string
+): Promise<void> {
+  await apiClient.post('/api/auth/change-password', {
+    currentPassword,
+    newPassword,
+  });
+}

src/api/client.ts

@@ -0,0 +1,386 @@
+/**
+ * API Client with JWT Authentication
+ * Handles all HTTP requests with automatic token management
+ */
+
+import { ApiError } from './types';
+
+// Storage keys for authentication tokens
+const ACCESS_TOKEN_KEY = 'grh_access_token';
+const REFRESH_TOKEN_KEY = 'grh_refresh_token';
+
+// Base URL from environment variable
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
+
+/**
+ * Request configuration options
+ */
+interface RequestOptions {
+  headers?: Record<string, string>;
+  params?: Record<string, string | number | boolean | undefined | null>;
+  skipAuth?: boolean;
+}
+
+/**
+ * Internal request configuration
+ */
+interface InternalRequestConfig {
+  method: string;
+  url: string;
+  data?: unknown;
+  options?: RequestOptions;
+}
+
+/**
+ * Flag to prevent multiple simultaneous refresh attempts
+ */
+let isRefreshing = false;
+
+/**
+ * Queue of requests waiting for token refresh
+ */
+let refreshQueue: Array<{
+  resolve: (token: string) => void;
+  reject: (error: Error) => void;
+}> = [];
+
+/**
+ * Get stored access token from localStorage
+ */
+function getAccessToken(): string | null {
+  try {
+    return localStorage.getItem(ACCESS_TOKEN_KEY);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get stored refresh token from localStorage
+ */
+function getRefreshToken(): string | null {
+  try {
+    return localStorage.getItem(REFRESH_TOKEN_KEY);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Store access token in localStorage
+ */
+function setAccessToken(token: string): void {
+  try {
+    localStorage.setItem(ACCESS_TOKEN_KEY, token);
+  } catch {
+    console.error('Failed to store access token');
+  }
+}
+
+/**
+ * Clear all auth tokens from localStorage
+ */
+function clearTokens(): void {
+  try {
+    localStorage.removeItem(ACCESS_TOKEN_KEY);
+    localStorage.removeItem(REFRESH_TOKEN_KEY);
+  } catch {
+    console.error('Failed to clear tokens');
+  }
+}
+
+/**
+ * Redirect to login page
+ */
+function redirectToLogin(): void {
+  clearTokens();
+  // Use window.location for a hard redirect to clear any state
+  window.location.href = '/login';
+}
+
+/**
+ * Build URL with query parameters
+ */
+function buildUrl(endpoint: string, params?: RequestOptions['params']): string {
+  const url = new URL(endpoint.startsWith('http') ? endpoint : `${BASE_URL}${endpoint}`);
+
+  if (params) {
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        url.searchParams.append(key, String(value));
+      }
+    });
+  }
+
+  return url.toString();
+}
+
+/**
+ * Build headers with optional authentication
+ */
+function buildHeaders(options?: RequestOptions): Headers {
+  const headers = new Headers({
+    'Content-Type': 'application/json',
+    ...options?.headers,
+  });
+
+  if (!options?.skipAuth) {
+    const token = getAccessToken();
+    if (token) {
+      headers.set('Authorization', `Bearer ${token}`);
+    }
+  }
+
+  return headers;
+}
+
+/**
+ * Attempt to refresh the access token
+ */
+async function refreshAccessToken(): Promise<string> {
+  const refreshToken = getRefreshToken();
+
+  if (!refreshToken) {
+    throw new ApiError('No refresh token available', 401);
+  }
+
+  const response = await fetch(`${BASE_URL}/api/auth/refresh`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ refreshToken }),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new ApiError(
+      errorData.error?.message || 'Token refresh failed',
+      response.status,
+      errorData.error?.errors
+    );
+  }
+
+  const data = await response.json();
+  const newAccessToken = data.accessToken || data.data?.accessToken;
+
+  if (!newAccessToken) {
+    throw new ApiError('Invalid refresh response', 401);
+  }
+
+  setAccessToken(newAccessToken);
+  return newAccessToken;
+}
+
+/**
+ * Handle token refresh with queue management
+ * Ensures only one refresh request is made at a time
+ */
+async function handleTokenRefresh(): Promise<string> {
+  if (isRefreshing) {
+    // Wait for the ongoing refresh to complete
+    return new Promise<string>((resolve, reject) => {
+      refreshQueue.push({ resolve, reject });
+    });
+  }
+
+  isRefreshing = true;
+
+  try {
+    const newToken = await refreshAccessToken();
+
+    // Resolve all queued requests with the new token
+    refreshQueue.forEach(({ resolve }) => resolve(newToken));
+    refreshQueue = [];
+
+    return newToken;
+  } catch (error) {
+    // Reject all queued requests
+    refreshQueue.forEach(({ reject }) => reject(error as Error));
+    refreshQueue = [];
+
+    throw error;
+  } finally {
+    isRefreshing = false;
+  }
+}
+
+/**
+ * Parse response and handle errors
+ */
+async function parseResponse<T>(response: Response): Promise<T> {
+  const contentType = response.headers.get('content-type');
+
+  // Handle empty responses
+  if (response.status === 204 || !contentType) {
+    return undefined as T;
+  }
+
+  // Parse JSON response
+  if (contentType.includes('application/json')) {
+    const data = await response.json();
+
+    // Handle wrapped API responses
+    if (data && typeof data === 'object') {
+      if ('success' in data) {
+        if (data.success === false) {
+          throw new ApiError(
+            data.error?.message || 'Request failed',
+            response.status,
+            data.error?.errors
+          );
+        }
+        return data.data as T;
+      }
+    }
+
+    return data as T;
+  }
+
+  // Handle text responses
+  const text = await response.text();
+  return text as T;
+}
+
+/**
+ * Core request function with retry logic for 401 errors
+ */
+async function request<T>(config: InternalRequestConfig): Promise<T> {
+  const { method, url, data, options } = config;
+
+  const makeRequest = async (authToken?: string): Promise<Response> => {
+    const headers = buildHeaders(options);
+
+    // Override with new token if provided (after refresh)
+    if (authToken) {
+      headers.set('Authorization', `Bearer ${authToken}`);
+    }
+
+    const fetchOptions: RequestInit = {
+      method,
+      headers,
+    };
+
+    if (data !== undefined && method !== 'GET' && method !== 'HEAD') {
+      fetchOptions.body = JSON.stringify(data);
+    }
+
+    return fetch(buildUrl(url, options?.params), fetchOptions);
+  };
+
+  try {
+    let response = await makeRequest();
+
+    // Handle 401 Unauthorized - attempt token refresh
+    if (response.status === 401 && !options?.skipAuth) {
+      try {
+        const newToken = await handleTokenRefresh();
+        // Retry the original request with new token
+        response = await makeRequest(newToken);
+      } catch (refreshError) {
+        // Refresh failed - redirect to login
+        redirectToLogin();
+        throw new ApiError('Session expired. Please log in again.', 401);
+      }
+    }
+
+    // Handle other error responses
+    if (!response.ok) {
+      let errorMessage = `Request failed with status ${response.status}`;
+      let errors: string[] | undefined;
+
+      try {
+        const errorData = await response.json();
+        if (errorData.error?.message) {
+          errorMessage = errorData.error.message;
+          errors = errorData.error.errors;
+        } else if (errorData.message) {
+          errorMessage = errorData.message;
+        }
+      } catch {
+        // Unable to parse error response, use default message
+      }
+
+      throw new ApiError(errorMessage, response.status, errors);
+    }
+
+    return parseResponse<T>(response);
+  } catch (error) {
+    // Re-throw ApiError instances
+    if (error instanceof ApiError) {
+      throw error;
+    }
+
+    // Handle network errors
+    if (error instanceof TypeError && error.message.includes('fetch')) {
+      throw new ApiError('Network error. Please check your connection.', 0);
+    }
+
+    // Handle other errors
+    throw new ApiError(
+      error instanceof Error ? error.message : 'An unexpected error occurred',
+      0
+    );
+  }
+}
+
+/**
+ * API Client object with HTTP methods
+ */
+export const apiClient = {
+  /**
+   * Perform a GET request
+   * @param url - The endpoint URL
+   * @param options - Optional request configuration
+   * @returns Promise resolving to the response data
+   */
+  get<T>(url: string, options?: RequestOptions): Promise<T> {
+    return request<T>({ method: 'GET', url, options });
+  },
+
+  /**
+   * Perform a POST request
+   * @param url - The endpoint URL
+   * @param data - The request body data
+   * @param options - Optional request configuration
+   * @returns Promise resolving to the response data
+   */
+  post<T>(url: string, data?: unknown, options?: RequestOptions): Promise<T> {
+    return request<T>({ method: 'POST', url, data, options });
+  },
+
+  /**
+   * Perform a PUT request
+   * @param url - The endpoint URL
+   * @param data - The request body data
+   * @param options - Optional request configuration
+   * @returns Promise resolving to the response data
+   */
+  put<T>(url: string, data?: unknown, options?: RequestOptions): Promise<T> {
+    return request<T>({ method: 'PUT', url, data, options });
+  },
+
+  /**
+   * Perform a PATCH request
+   * @param url - The endpoint URL
+   * @param data - The request body data
+   * @param options - Optional request configuration
+   * @returns Promise resolving to the response data
+   */
+  patch<T>(url: string, data?: unknown, options?: RequestOptions): Promise<T> {
+    return request<T>({ method: 'PATCH', url, data, options });
+  },
+
+  /**
+   * Perform a DELETE request
+   * @param url - The endpoint URL
+   * @param data - Optional request body data
+   * @param options - Optional request configuration
+   * @returns Promise resolving to the response data
+   */
+  delete<T>(url: string, data?: unknown, options?: RequestOptions): Promise<T> {
+    return request<T>({ method: 'DELETE', url, data, options });
+  },
+};
+
+export default apiClient;

src/api/concentrators.ts

@@ -1,210 +1,139 @@
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-export const CONCENTRATORS_API_URL = `${API_BASE_URL}/api/v3/data/pirzzp3t8kclgo3/mheif1vdgnyt8x2/records`;
-const API_TOKEN = import.meta.env.VITE_API_TOKEN;
+/**
+ * Concentrators API
+ * Handles all concentrator-related API operations using the backend API client
+ */
 
-const getAuthHeaders = () => ({
-  Authorization: `Bearer ${API_TOKEN}`,
-  "Content-Type": "application/json",
-});
+import { apiClient } from './client';
 
-export interface ConcentratorRecord {
-  id: string;
-  fields: {
-    "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;
-  };
+// Helper to convert snake_case to camelCase
+function snakeToCamel(str: string): string {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
 }
 
-export interface ConcentratorsResponse {
-  records: ConcentratorRecord[];
-  next?: string;
-  prev?: string;
-  nestedNext?: string;
-  nestedPrev?: string;
+// Transform object keys from snake_case to camelCase
+function transformKeys<T>(obj: Record<string, unknown>): T {
+  const transformed: Record<string, unknown> = {};
+  for (const key in obj) {
+    const camelKey = snakeToCamel(key);
+    const value = obj[key];
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      transformed[camelKey] = transformKeys(value as Record<string, unknown>);
+    } else {
+      transformed[camelKey] = value;
+    }
+  }
+  return transformed as T;
 }
 
+// Transform array of objects
+function transformArray<T>(arr: Record<string, unknown>[]): T[] {
+  return arr.map(item => transformKeys<T>(item));
+}
+
+/**
+ * Concentrator type enum
+ */
+export type ConcentratorType = 'LORA' | 'LORAWAN' | 'GRANDES';
+
+/**
+ * Concentrator entity from the backend
+ */
 export 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;
+  serialNumber: string;
+  name: string;
+  projectId: string;
+  location: string | null;
+  type: ConcentratorType;
+  status: string;
+  ipAddress: string | null;
+  firmwareVersion: string | null;
+  lastCommunication: string | null;
+  createdAt: string;
+  updatedAt: string;
 }
 
-export const fetchConcentrators = async (): Promise<Concentrator[]> => {
-  try {
-    const url = new URL(CONCENTRATORS_API_URL);
-    url.searchParams.set('viewId', 'vw93mj98ylyxratm');
+/**
+ * Input data for creating or updating a concentrator
+ */
+export interface ConcentratorInput {
+  serialNumber: string;
+  name: string;
+  projectId: string;
+  location?: string;
+  type?: ConcentratorType;
+  status?: string;
+  ipAddress?: string;
+  firmwareVersion?: string;
+}
 
-    
-    const response = await fetch(url.toString(), {
-      method: "GET",
-      headers: getAuthHeaders(),
-    });
+/**
+ * Fetch all concentrators, optionally filtered by project
+ * @param projectId - Optional project ID to filter concentrators
+ * @returns Promise resolving to an array of concentrators
+ */
+export async function fetchConcentrators(projectId?: string): Promise<Concentrator[]> {
+  const params = projectId ? { project_id: projectId } : undefined;
+  const response = await apiClient.get<Record<string, unknown>[]>('/api/concentrators', { params });
+  return transformArray<Concentrator>(response);
+}
 
-    if (!response.ok) {
-      throw new Error("Failed to fetch concentrators");
-    }
+/**
+ * Fetch a single concentrator by ID
+ * @param id - The concentrator ID
+ * @returns Promise resolving to the concentrator
+ */
+export async function fetchConcentrator(id: string): Promise<Concentrator> {
+  const response = await apiClient.get<Record<string, unknown>>(`/api/concentrators/${id}`);
+  return transformKeys<Concentrator>(response);
+}
 
-    const data: ConcentratorsResponse = await response.json();
+/**
+ * Create a new concentrator
+ * @param data - The concentrator data
+ * @returns Promise resolving to the created concentrator
+ */
+export async function createConcentrator(data: ConcentratorInput): Promise<Concentrator> {
+  const backendData = {
+    serial_number: data.serialNumber,
+    name: data.name,
+    project_id: data.projectId,
+    location: data.location,
+    type: data.type,
+    status: data.status,
+    ip_address: data.ipAddress,
+    firmware_version: data.firmwareVersion,
+  };
+  const response = await apiClient.post<Record<string, unknown>>('/api/concentrators', backendData);
+  return transformKeys<Concentrator>(response);
+}
 
-    return data.records.map((r: ConcentratorRecord) => ({
-      id: r.id,
-      "Area Name": r.fields["Area Name"] || "",
-      "Device S/N": r.fields["Device S/N"] || "",
-      "Device Name": r.fields["Device Name"] || "",
-      "Device Time": r.fields["Device Time"] || "",
-      "Device Status": r.fields["Device Status"] || "",
-      "Operator": r.fields["Operator"] || "",
-      "Installed Time": r.fields["Installed Time"] || "",
-      "Communication Time": r.fields["Communication Time"] || "",
-      "Instruction Manual": r.fields["Instruction Manual"] || "",
-    }));
-  } catch (error) {
-    console.error("Error fetching concentrators:", error);
-    throw error;
-  }
-};
+/**
+ * Update an existing concentrator
+ * @param id - The concentrator ID
+ * @param data - The updated concentrator data
+ * @returns Promise resolving to the updated concentrator
+ */
+export async function updateConcentrator(id: string, data: Partial<ConcentratorInput>): Promise<Concentrator> {
+  const backendData: Record<string, unknown> = {};
+  if (data.serialNumber !== undefined) backendData.serial_number = data.serialNumber;
+  if (data.name !== undefined) backendData.name = data.name;
+  if (data.projectId !== undefined) backendData.project_id = data.projectId;
+  if (data.location !== undefined) backendData.location = data.location;
+  if (data.type !== undefined) backendData.type = data.type;
+  if (data.status !== undefined) backendData.status = data.status;
+  if (data.ipAddress !== undefined) backendData.ip_address = data.ipAddress;
+  if (data.firmwareVersion !== undefined) backendData.firmware_version = data.firmwareVersion;
 
-export const createConcentrator = async (
-  concentratorData: Omit<Concentrator, "id">
-): Promise<Concentrator> => {
-  try {
-    const response = await fetch(CONCENTRATORS_API_URL, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        fields: {
-          "Area Name": concentratorData["Area Name"],
-          "Device S/N": concentratorData["Device S/N"],
-          "Device Name": concentratorData["Device Name"],
-          "Device Time": concentratorData["Device Time"],
-          "Device Status": concentratorData["Device Status"],
-          "Operator": concentratorData["Operator"],
-          "Installed Time": concentratorData["Installed Time"],
-          "Communication Time": concentratorData["Communication Time"],
-          "Instruction Manual": concentratorData["Instruction Manual"],
-        },
-      }),
-    });
+  const response = await apiClient.patch<Record<string, unknown>>(`/api/concentrators/${id}`, backendData);
+  return transformKeys<Concentrator>(response);
+}
 
-    if (!response.ok) {
-      throw new Error(`Failed to create concentrator: ${response.status} ${response.statusText}`);
-    }
-
-    const data = await response.json();
-    const createdRecord = data.records?.[0];
-
-    if (!createdRecord) {
-      throw new Error("Invalid response format: no record returned");
-    }
-
-    return {
-      id: createdRecord.id,
-      "Area Name": createdRecord.fields["Area Name"] || concentratorData["Area Name"],
-      "Device S/N": createdRecord.fields["Device S/N"] || concentratorData["Device S/N"],
-      "Device Name": createdRecord.fields["Device Name"] || concentratorData["Device Name"],
-      "Device Time": createdRecord.fields["Device Time"] || concentratorData["Device Time"],
-      "Device Status": createdRecord.fields["Device Status"] || concentratorData["Device Status"],
-      "Operator": createdRecord.fields["Operator"] || concentratorData["Operator"],
-      "Installed Time": createdRecord.fields["Installed Time"] || concentratorData["Installed Time"],
-      "Communication Time": createdRecord.fields["Communication Time"] || concentratorData["Communication Time"],
-      "Instruction Manual": createdRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
-    };
-  } catch (error) {
-    console.error("Error creating concentrator:", error);
-    throw error;
-  }
-};
-
-export const updateConcentrator = async (
-  id: string,
-  concentratorData: Omit<Concentrator, "id">
-): Promise<Concentrator> => {
-  try {
-    const response = await fetch(CONCENTRATORS_API_URL, {
-      method: "PATCH",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        id: id,
-        fields: {
-          "Area Name": concentratorData["Area Name"],
-          "Device S/N": concentratorData["Device S/N"],
-          "Device Name": concentratorData["Device Name"],
-          "Device Time": concentratorData["Device Time"],
-          "Device Status": concentratorData["Device Status"],
-          "Operator": concentratorData["Operator"],
-          "Installed Time": concentratorData["Installed Time"],
-          "Communication Time": concentratorData["Communication Time"],
-          "Instruction Manual": concentratorData["Instruction Manual"],
-        },
-      }),
-    });
-
-    if (!response.ok) {
-      if (response.status === 400) {
-        const errorData = await response.json();
-        throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
-      }
-      throw new Error(`Failed to update concentrator: ${response.status} ${response.statusText}`);
-    }
-
-    const data = await response.json();
-    const updatedRecord = data.records?.[0];
-
-    if (!updatedRecord) {
-      throw new Error("Invalid response format: no record returned");
-    }
-
-    return {
-      id: updatedRecord.id,
-      "Area Name": updatedRecord.fields["Area Name"] || concentratorData["Area Name"],
-      "Device S/N": updatedRecord.fields["Device S/N"] || concentratorData["Device S/N"],
-      "Device Name": updatedRecord.fields["Device Name"] || concentratorData["Device Name"],
-      "Device Time": updatedRecord.fields["Device Time"] || concentratorData["Device Time"],
-      "Device Status": updatedRecord.fields["Device Status"] || concentratorData["Device Status"],
-      "Operator": updatedRecord.fields["Operator"] || concentratorData["Operator"],
-      "Installed Time": updatedRecord.fields["Installed Time"] || concentratorData["Installed Time"],
-      "Communication Time": updatedRecord.fields["Communication Time"] || concentratorData["Communication Time"],
-      "Instruction Manual": updatedRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
-    };
-  } catch (error) {
-    console.error("Error updating concentrator:", error);
-    throw error;
-  }
-};
-
-export const deleteConcentrator = async (id: string): Promise<void> => {
-  try {
-    const response = await fetch(CONCENTRATORS_API_URL, {
-      method: "DELETE",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        id: id,
-      }),
-    });
-
-    if (!response.ok) {
-      if (response.status === 400) {
-        const errorData = await response.json();
-        throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
-      }
-      throw new Error(`Failed to delete concentrator: ${response.status} ${response.statusText}`);
-    }
-  } catch (error) {
-    console.error("Error deleting concentrator:", error);
-    throw error;
-  }
-};
+/**
+ * Delete a concentrator
+ * @param id - The concentrator ID
+ * @returns Promise resolving when the concentrator is deleted
+ */
+export async function deleteConcentrator(id: string): Promise<void> {
+  return apiClient.delete<void>(`/api/concentrators/${id}`);
+}

src/api/me.ts

@@ -1,45 +1,83 @@
+/**
+ * User Profile API
+ * Handles all user profile-related API operations using the backend API client
+ */
+
+import { apiClient } from './client';
+
+/**
+ * User entity from the backend
+ */
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatarUrl: string | null;
+  role: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * Get the current user's profile
+ * @returns Promise resolving to the user profile
+ */
+export async function getMyProfile(): Promise<User> {
+  return apiClient.get<User>('/api/me');
+}
+
+/**
+ * Update the current user's profile
+ * @param data - The updated profile data
+ * @returns Promise resolving to the updated user profile
+ */
+export async function updateMyProfile(data: { name?: string; email?: string }): Promise<User> {
+  return apiClient.put<User>('/api/me', data);
+}
+
+/**
+ * Upload a new avatar for the current user
+ * @param file - The avatar image file
+ * @returns Promise resolving to the new avatar URL
+ */
 export async function uploadMyAvatar(file: File): Promise<{ avatarUrl: string }> {
-    const form = new FormData();
-    form.append("avatar", file);
-  
-    const res = await fetch("/api/me/avatar", {
-      method: "POST",
-      body: form,
-      // NO pongas Content-Type; el browser lo agrega con boundary
-      headers: {
-        // Si usas token:
-        // Authorization: `Bearer ${localStorage.getItem("token") ?? ""}`,
-      },
-    });
-  
-    if (!res.ok) {
-      const text = await res.text().catch(() => "");
-      throw new Error(`Upload avatar failed: ${res.status} ${text}`);
-    }
-  
-    const data = await res.json();
-    if (!data?.avatarUrl) throw new Error("Respuesta sin avatarUrl");
-    return { avatarUrl: data.avatarUrl };
+  // For file uploads, we need to use FormData and handle it differently
+  const formData = new FormData();
+  formData.append('avatar', file);
+
+  const token = localStorage.getItem('grh_access_token');
+
+  const response = await fetch('/api/me/avatar', {
+    method: 'POST',
+    headers: {
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => '');
+    throw new Error(`Upload avatar failed: ${response.status} ${errorText}`);
   }
-  
-  export async function updateMyProfile(input: {
-    name: string;
-    email: string;
-  }): Promise<{ name?: string; email?: string; avatarUrl?: string | null }> {
-    const res = await fetch("/api/me", {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-        // Authorization: `Bearer ${localStorage.getItem("token") ?? ""}`,
-      },
-      body: JSON.stringify(input),
-    });
-  
-    if (!res.ok) {
-      const text = await res.text().catch(() => "");
-      throw new Error(`Update profile failed: ${res.status} ${text}`);
-    }
-  
-    return res.json();
+
+  const data = await response.json();
+
+  if (!data?.avatarUrl && !data?.data?.avatarUrl) {
+    throw new Error('Response missing avatarUrl');
   }
-  
+
+  return { avatarUrl: data.avatarUrl || data.data?.avatarUrl };
+}
+
+/**
+ * Change the current user's password
+ * @param currentPassword - The current password
+ * @param newPassword - The new password
+ * @returns Promise resolving when the password is changed
+ */
+export async function changeMyPassword(currentPassword: string, newPassword: string): Promise<void> {
+  return apiClient.post<void>('/api/me/password', {
+    currentPassword,
+    newPassword,
+  });
+}

src/api/meters.ts

@@ -1,312 +1,238 @@
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-export const METERS_API_URL = `${API_BASE_URL}/api/v3/data/pirzzp3t8kclgo3/m4hzpnopjkppaav/records`;
-const API_TOKEN = import.meta.env.VITE_API_TOKEN;
+/**
+ * Meters API
+ * Handles all meter-related API operations using the backend API client
+ */
 
-const getAuthHeaders = () => ({
-  Authorization: `Bearer ${API_TOKEN}`,
-  "Content-Type": "application/json",
-});
+import { apiClient } from './client';
 
-export interface MeterRecord {
+// Helper to convert snake_case to camelCase
+function snakeToCamel(str: string): string {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+// Transform object keys from snake_case to camelCase
+function transformKeys<T>(obj: Record<string, unknown>): T {
+  const transformed: Record<string, unknown> = {};
+  for (const key in obj) {
+    const camelKey = snakeToCamel(key);
+    const value = obj[key];
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      transformed[camelKey] = transformKeys(value as Record<string, unknown>);
+    } else {
+      transformed[camelKey] = value;
+    }
+  }
+  return transformed as T;
+}
+
+// Transform array of objects
+function transformArray<T>(arr: Record<string, unknown>[]): T[] {
+  return arr.map(item => transformKeys<T>(item));
+}
+
+/**
+ * Meter entity from the backend
+ * Meters belong to Concentrators (LORA protocol)
+ */
+export interface Meter {
   id: string;
-  fields: {
-    CreatedAt: string;
-    UpdatedAt: string;
-    "Area Name": string;
-    "Account Number": string | null;
-    "User Name": string | null;
-    "User Address": string | null;
-    "Meter S/N": string;
-    "Meter Name": string;
-    "Meter Status": string;
-    "Protocol Type": string;
-    "Price No.": string | null;
-    "Price Name": string | null;
-    "DMA Partition": string | null;
-    "Supply Types": string;
-    "Device ID": string;
-    "Device Name": string;
-    "Device Type": string;
-    "Usage Analysis Type": string;
-    "installed Time": string;
+  serialNumber: string;
+  meterId: string | null;
+  name: string;
+  concentratorId: string;
+  location: string | null;
+  type: string;
+  status: string;
+  lastReadingValue: number | null;
+  lastReadingAt: string | null;
+  installationDate: string | null;
+  createdAt: string;
+  updatedAt: string;
+  // From joins
+  concentratorName?: string;
+  concentratorSerial?: string;
+  projectId?: string;
+  projectName?: string;
+}
+
+/**
+ * Input data for creating or updating a meter
+ */
+export interface MeterInput {
+  serialNumber: string;
+  meterId?: string;
+  name: string;
+  concentratorId: string;
+  location?: string;
+  type?: string;
+  status?: string;
+  installationDate?: string;
+}
+
+/**
+ * Meter reading entity
+ */
+export interface MeterReading {
+  id: string;
+  meterId: string;
+  value: number;
+  unit: string;
+  readingType: string;
+  readAt: string;
+  createdAt: string;
+}
+
+/**
+ * Fetch all meters, optionally filtered by concentrator or project
+ * @param filters - Optional filters (concentratorId, projectId)
+ * @returns Promise resolving to an array of meters
+ */
+export async function fetchMeters(filters?: { concentratorId?: string; projectId?: string }): Promise<Meter[]> {
+  const params: Record<string, string> = {};
+  if (filters?.concentratorId) params.concentrator_id = filters.concentratorId;
+  if (filters?.projectId) params.project_id = filters.projectId;
+
+  const response = await apiClient.get<Record<string, unknown>[]>('/api/meters', {
+    params: Object.keys(params).length > 0 ? params : undefined
+  });
+  return transformArray<Meter>(response);
+}
+
+/**
+ * Fetch a single meter by ID
+ * @param id - The meter ID
+ * @returns Promise resolving to the meter
+ */
+export async function fetchMeter(id: string): Promise<Meter> {
+  const response = await apiClient.get<Record<string, unknown>>(`/api/meters/${id}`);
+  return transformKeys<Meter>(response);
+}
+
+/**
+ * Create a new meter
+ * @param data - The meter data
+ * @returns Promise resolving to the created meter
+ */
+export async function createMeter(data: MeterInput): Promise<Meter> {
+  // Convert camelCase to snake_case for backend
+  const backendData = {
+    serial_number: data.serialNumber,
+    meter_id: data.meterId,
+    name: data.name,
+    concentrator_id: data.concentratorId,
+    location: data.location,
+    type: data.type,
+    status: data.status,
+    installation_date: data.installationDate,
+  };
+  const response = await apiClient.post<Record<string, unknown>>('/api/meters', backendData);
+  return transformKeys<Meter>(response);
+}
+
+/**
+ * Update an existing meter
+ * @param id - The meter ID
+ * @param data - The updated meter data
+ * @returns Promise resolving to the updated meter
+ */
+export async function updateMeter(id: string, data: Partial<MeterInput>): Promise<Meter> {
+  // Convert camelCase to snake_case for backend
+  const backendData: Record<string, unknown> = {};
+  if (data.serialNumber !== undefined) backendData.serial_number = data.serialNumber;
+  if (data.meterId !== undefined) backendData.meter_id = data.meterId;
+  if (data.name !== undefined) backendData.name = data.name;
+  if (data.concentratorId !== undefined) backendData.concentrator_id = data.concentratorId;
+  if (data.location !== undefined) backendData.location = data.location;
+  if (data.type !== undefined) backendData.type = data.type;
+  if (data.status !== undefined) backendData.status = data.status;
+  if (data.installationDate !== undefined) backendData.installation_date = data.installationDate;
+
+  const response = await apiClient.patch<Record<string, unknown>>(`/api/meters/${id}`, backendData);
+  return transformKeys<Meter>(response);
+}
+
+/**
+ * Delete a meter
+ * @param id - The meter ID
+ * @returns Promise resolving when the meter is deleted
+ */
+export async function deleteMeter(id: string): Promise<void> {
+  return apiClient.delete<void>(`/api/meters/${id}`);
+}
+
+/**
+ * Fetch readings for a specific meter
+ * @param id - The meter ID
+ * @returns Promise resolving to an array of meter readings
+ */
+export async function fetchMeterReadings(id: string): Promise<MeterReading[]> {
+  return apiClient.get<MeterReading[]>(`/api/meters/${id}/readings`);
+}
+
+/**
+ * Bulk upload result interface
+ */
+export interface BulkUploadResult {
+  success: boolean;
+  data: {
+    totalRows: number;
+    inserted: number;
+    failed: number;
+    errors: Array<{
+      row: number;
+      error: string;
+      data?: Record<string, unknown>;
+    }>;
   };
 }
 
-export interface MetersResponse {
-  records: MeterRecord[];
-  next?: string;
-  prev?: string;
-  nestedNext?: string;
-  nestedPrev?: string;
+/**
+ * Bulk upload meters from Excel file
+ * @param file - Excel file to upload
+ * @returns Promise resolving to upload result
+ */
+export async function bulkUploadMeters(file: File): Promise<BulkUploadResult> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'}/api/bulk-upload/meters`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${localStorage.getItem('accessToken')}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Error en la carga masiva');
+  }
+
+  return response.json();
 }
 
-export 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;
+/**
+ * Download meter template Excel file
+ */
+export async function downloadMeterTemplate(): Promise<void> {
+  const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'}/api/bulk-upload/meters/template`, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${localStorage.getItem('accessToken')}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error('Error descargando la plantilla');
+  }
+
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'plantilla_medidores.xlsx';
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
 }
-
-export const fetchMeters = async (): Promise<Meter[]> => {
-  const pageSize = 9999;
-  try {
-    const url = new URL(METERS_API_URL);
-    url.searchParams.set('viewId', 'vwo7tqwu8fi6ie83');
-    url.searchParams.set('pageSize', pageSize.toString());
-
-    const response = await fetch(url.toString(), {
-      method: "GET",
-      headers: getAuthHeaders()
-    });
-
-    if (!response.ok) {
-      throw new Error("Failed to fetch meters");
-    }
-
-    const data: MetersResponse = await response.json();
-    const ans = data.records.map((r: MeterRecord) => ({
-      id: r.id,
-      createdAt: r.fields.CreatedAt || "",
-      updatedAt: r.fields.UpdatedAt || "",
-      areaName: r.fields["Area Name"] || "",
-      accountNumber: r.fields["Account Number"] || null,
-      userName: r.fields["User Name"] || null,
-      userAddress: r.fields["User Address"] || null,
-      meterSerialNumber: r.fields["Meter S/N"] || "",
-      meterName: r.fields["Meter Name"] || "",
-      meterStatus: r.fields["Meter Status"] || "",
-      protocolType: r.fields["Protocol Type"] || "",
-      priceNo: r.fields["Price No."] || null,
-      priceName: r.fields["Price Name"] || null,
-      dmaPartition: r.fields["DMA Partition"] || null,
-      supplyTypes: r.fields["Supply Types"] || "",
-      deviceId: r.fields["Device ID"] || "",
-      deviceName: r.fields["Device Name"] || "",
-      deviceType: r.fields["Device Type"] || "",
-      usageAnalysisType: r.fields["Usage Analysis Type"] || "",
-      installedTime: r.fields["installed Time"] || "",
-    }));
-
-    return ans;
-  } catch (error) {
-    console.error("Error fetching meters:", error);
-    throw error;
-  }
-};
-
-export const createMeter = async (
-  meterData: Omit<Meter, "id">
-): Promise<Meter> => {
-  try {
-    const response = await fetch(METERS_API_URL, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        fields: {
-          CreatedAt: meterData.createdAt,
-          UpdatedAt: meterData.updatedAt,
-          "Area Name": meterData.areaName,
-          "Account Number": meterData.accountNumber,
-          "User Name": meterData.userName,
-          "User Address": meterData.userAddress,
-          "Meter S/N": meterData.meterSerialNumber,
-          "Meter Name": meterData.meterName,
-          "Meter Status": meterData.meterStatus,
-          "Protocol Type": meterData.protocolType,
-          "Price No.": meterData.priceNo,
-          "Price Name": meterData.priceName,
-          "DMA Partition": meterData.dmaPartition,
-          "Supply Types": meterData.supplyTypes,
-          "Device ID": meterData.deviceId,
-          "Device Name": meterData.deviceName,
-          "Device Type": meterData.deviceType,
-          "Usage Analysis Type": meterData.usageAnalysisType,
-          "Installed Time": meterData.installedTime,
-        },
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(
-        `Failed to create meter: ${response.status} ${response.statusText}`
-      );
-    }
-
-    const data = await response.json();
-    const createdRecord = data.records?.[0];
-
-    if (!createdRecord) {
-      throw new Error("Invalid response format: no record returned");
-    }
-
-    return {
-      id: createdRecord.id,
-      createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
-      updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
-      areaName: createdRecord.fields["Area Name"] || meterData.areaName,
-      accountNumber:
-        createdRecord.fields["Account Number"] || meterData.accountNumber,
-      userName: createdRecord.fields["User Name"] || meterData.userName,
-      userAddress:
-        createdRecord.fields["User Address"] || meterData.userAddress,
-      meterSerialNumber:
-        createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
-      meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
-      meterStatus:
-        createdRecord.fields["Meter Status"] || meterData.meterStatus,
-      protocolType:
-        createdRecord.fields["Protocol Type"] || meterData.protocolType,
-      priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
-      priceName: createdRecord.fields["Price Name"] || meterData.priceName,
-      dmaPartition:
-        createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
-      supplyTypes:
-        createdRecord.fields["Supply Types"] || meterData.supplyTypes,
-      deviceId: createdRecord.fields["Device ID"] || meterData.deviceId,
-      deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
-      deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
-      usageAnalysisType:
-        createdRecord.fields["Usage Analysis Type"] ||
-        meterData.usageAnalysisType,
-      installedTime:
-        createdRecord.fields["Installed Time"] || meterData.installedTime,
-    };
-  } catch (error) {
-    console.error("Error creating meter:", error);
-    throw error;
-  }
-};
-
-export const updateMeter = async (
-  id: string,
-  meterData: Omit<Meter, "id">
-): Promise<Meter> => {
-  try {
-    const response = await fetch(METERS_API_URL, {
-      method: "PATCH",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        id: id,
-        fields: {
-          CreatedAt: meterData.createdAt,
-          UpdatedAt: meterData.updatedAt,
-          "Area Name": meterData.areaName,
-          "Account Number": meterData.accountNumber,
-          "User Name": meterData.userName,
-          "User Address": meterData.userAddress,
-          "Meter S/N": meterData.meterSerialNumber,
-          "Meter Name": meterData.meterName,
-          "Meter Status": meterData.meterStatus,
-          "Protocol Type": meterData.protocolType,
-          "Price No.": meterData.priceNo,
-          "Price Name": meterData.priceName,
-          "DMA Partition": meterData.dmaPartition,
-          "Supply Types": meterData.supplyTypes,
-          "Device ID": meterData.deviceId,
-          "Device Name": meterData.deviceName,
-          "Device Type": meterData.deviceType,
-          "Usage Analysis Type": meterData.usageAnalysisType,
-          "Installed Time": meterData.installedTime,
-        },
-      }),
-    });
-
-    if (!response.ok) {
-      if (response.status === 400) {
-        const errorData = await response.json();
-        throw new Error(
-          `Bad Request: ${errorData.msg || "Invalid data provided"}`
-        );
-      }
-      throw new Error(
-        `Failed to update meter: ${response.status} ${response.statusText}`
-      );
-    }
-
-    const data = await response.json();
-    const updatedRecord = data.records?.[0];
-
-    if (!updatedRecord) {
-      throw new Error("Invalid response format: no record returned");
-    }
-
-    return {
-      id: updatedRecord.id,
-      createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
-      updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
-      areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
-      accountNumber:
-        updatedRecord.fields["Account Number"] || meterData.accountNumber,
-      userName: updatedRecord.fields["User Name"] || meterData.userName,
-      userAddress:
-        updatedRecord.fields["User Address"] || meterData.userAddress,
-      meterSerialNumber:
-        updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
-      meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
-      meterStatus:
-        updatedRecord.fields["Meter Status"] || meterData.meterStatus,
-      protocolType:
-        updatedRecord.fields["Protocol Type"] || meterData.protocolType,
-      priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
-      priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
-      dmaPartition:
-        updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
-      supplyTypes:
-        updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
-      deviceId: updatedRecord.fields["Device ID"] || meterData.deviceId,
-      deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
-      deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
-      usageAnalysisType:
-        updatedRecord.fields["Usage Analysis Type"] ||
-        meterData.usageAnalysisType,
-      installedTime:
-        updatedRecord.fields["Installed Time"] || meterData.installedTime,
-    };
-  } catch (error) {
-    console.error("Error updating meter:", error);
-    throw error;
-  }
-};
-
-export const deleteMeter = async (id: string): Promise<void> => {
-  try {
-    const response = await fetch(METERS_API_URL, {
-      method: "DELETE",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        id: id,
-      }),
-    });
-
-    if (!response.ok) {
-      if (response.status === 400) {
-        const errorData = await response.json();
-        throw new Error(
-          `Bad Request: ${errorData.msg || "Invalid data provided"}`
-        );
-      }
-      throw new Error(
-        `Failed to delete meter: ${response.status} ${response.statusText}`
-      );
-    }
-  } catch (error) {
-    console.error("Error deleting meter:", error);
-    throw error;
-  }
-};

src/api/projects.ts

@@ -1,247 +1,130 @@
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-export const PROJECTS_API_URL = `${API_BASE_URL}/api/v3/data/pirzzp3t8kclgo3/m9882vn3xb31e29/records`;
-const API_TOKEN = import.meta.env.VITE_API_TOKEN;
+/**
+ * Projects API
+ * Handles all project-related API operations using the backend API client
+ */
 
-export const getAuthHeaders = () => ({
-  "Content-Type": "application/json",
-  Authorization: `Bearer ${API_TOKEN}`,
-});
+import { apiClient } from './client';
 
-export interface ProjectRecord {
-  id: number;
-  fields: {
-    "Area Name"?: string;
-    "Device S/N"?: string;
-    "Device Name"?: string;
-    "Device Type"?: string;
-    "Device Status"?: string;
-    Operator?: string;
-    "Installed Time"?: string;
-    "Communication time"?: string;
-    "Instruction Manual"?: string | null;
-  };
+// Helper to convert snake_case to camelCase
+function snakeToCamel(str: string): string {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
 }
 
-export interface ProjectsResponse {
-  records: ProjectRecord[];
-  next?: string;
-  prev?: string;
-  nestedNext?: string;
-  nestedPrev?: string;
+// Transform object keys from snake_case to camelCase
+function transformKeys<T>(obj: Record<string, unknown>): T {
+  const transformed: Record<string, unknown> = {};
+  for (const key in obj) {
+    const camelKey = snakeToCamel(key);
+    const value = obj[key];
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      transformed[camelKey] = transformKeys(value as Record<string, unknown>);
+    } else {
+      transformed[camelKey] = value;
+    }
+  }
+  return transformed as T;
 }
 
+// Transform array of objects
+function transformArray<T>(arr: Record<string, unknown>[]): T[] {
+  return arr.map(item => transformKeys<T>(item));
+}
+
+/**
+ * Project entity from the backend
+ */
 export interface Project {
   id: string;
+  name: string;
+  description: string | null;
   areaName: string;
-  deviceSN: string;
-  deviceName: string;
-  deviceType: string;
-  deviceStatus: "ACTIVE" | "INACTIVE";
-  operator: string;
-  installedTime: string;
-  communicationTime: string;
+  location: string | null;
+  status: string;
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
 }
 
-export const fetchProjectNames = async (): Promise<string[]> => {
-  try {
-    const response = await fetch(PROJECTS_API_URL, {
-      method: "GET",
-      headers: getAuthHeaders(),
-    });
+/**
+ * Input data for creating or updating a project
+ */
+export interface ProjectInput {
+  name: string;
+  description?: string;
+  areaName: string;
+  location?: string;
+  status?: string;
+}
 
-    if (!response.ok) {
-      throw new Error("Failed to fetch projects");
-    }
+/**
+ * Fetch all projects
+ * @returns Promise resolving to an array of projects
+ */
+export async function fetchProjects(): Promise<Project[]> {
+  const response = await apiClient.get<Record<string, unknown>[]>('/api/projects');
+  return transformArray<Project>(response);
+}
 
-    const data: ProjectsResponse = await response.json();
+/**
+ * Fetch a single project by ID
+ * @param id - The project ID
+ * @returns Promise resolving to the project
+ */
+export async function fetchProject(id: string): Promise<Project> {
+  const response = await apiClient.get<Record<string, unknown>>(`/api/projects/${id}`);
+  return transformKeys<Project>(response);
+}
 
-    if (!data.records || data.records.length === 0) {
-      console.warn("No project records found from API");
-      return [];
-    }
-
-    const projectNames = [
-      ...new Set(
-        data.records
-          .map((record) => record.fields["Area Name"] || "")
-          .filter((name) => name)
-      ),
-    ];
-
-    return projectNames;
-  } catch (error) {
-    console.error("Error fetching project names:", error);
-    return [];
-  }
-};
-
-export const fetchProjects = async (): Promise<Project[]> => {
-  try {
-    const url = new URL(PROJECTS_API_URL);
-    url.searchParams.set('viewId', 'vwrrxvlzlxi7jfe7');
-
-    const response = await fetch(url.toString(), {
-      method: "GET",
-      headers: getAuthHeaders(),
-    });
-
-    if (!response.ok) {
-      throw new Error("Failed to fetch projects");
-    }
-
-    const data: ProjectsResponse = await response.json();
-
-    return data.records.map((r: ProjectRecord) => ({
-      id: r.id.toString(),
-      areaName: r.fields["Area Name"] ?? "",
-      deviceSN: r.fields["Device S/N"] ?? "",
-      deviceName: r.fields["Device Name"] ?? "",
-      deviceType: r.fields["Device Type"] ?? "",
-      deviceStatus:
-        r.fields["Device Status"] === "Installed" ? "ACTIVE" : "INACTIVE",
-      operator: r.fields["Operator"] ?? "",
-      installedTime: r.fields["Installed Time"] ?? "",
-      communicationTime: r.fields["Communication time"] ?? "",
-      instructionManual: "",
-    }));
-  } catch (error) {
-    console.error("Error fetching projects:", error);
-    throw error;
-  }
-};
-
-export const createProject = async (
-  projectData: Omit<Project, "id">
-): Promise<Project> => {
-  const response = await fetch(PROJECTS_API_URL, {
-    method: "POST",
-    headers: getAuthHeaders(),
-    body: JSON.stringify({
-      fields: {
-        "Area Name": projectData.areaName,
-        "Device S/N": projectData.deviceSN,
-        "Device Name": projectData.deviceName,
-        "Device Type": projectData.deviceType,
-        "Device Status":
-          projectData.deviceStatus === "ACTIVE" ? "Installed" : "Inactive",
-        Operator: projectData.operator,
-        "Installed Time": projectData.installedTime,
-        "Communication time": projectData.communicationTime,
-      },
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error(
-      `Failed to create project: ${response.status} ${response.statusText}`
-    );
-  }
-
-  const data = await response.json();
-
-  const createdRecord = data.records?.[0];
-  if (!createdRecord) {
-    throw new Error("Invalid response format: no record returned");
-  }
-
-  return {
-    id: createdRecord.id.toString(),
-    areaName: createdRecord.fields["Area Name"] ?? projectData.areaName,
-    deviceSN: createdRecord.fields["Device S/N"] ?? projectData.deviceSN,
-    deviceName: createdRecord.fields["Device Name"] ?? projectData.deviceName,
-    deviceType: createdRecord.fields["Device Type"] ?? projectData.deviceType,
-    deviceStatus:
-      createdRecord.fields["Device Status"] === "Installed"
-        ? "ACTIVE"
-        : "INACTIVE",
-    operator: createdRecord.fields["Operator"] ?? projectData.operator,
-    installedTime:
-      createdRecord.fields["Installed Time"] ?? projectData.installedTime,
-    communicationTime:
-      createdRecord.fields["Communication time"] ??
-      projectData.communicationTime,
+/**
+ * Create a new project
+ * @param data - The project data
+ * @returns Promise resolving to the created project
+ */
+export async function createProject(data: ProjectInput): Promise<Project> {
+  const backendData = {
+    name: data.name,
+    description: data.description,
+    area_name: data.areaName,
+    location: data.location,
+    status: data.status,
   };
-};
+  const response = await apiClient.post<Record<string, unknown>>('/api/projects', backendData);
+  return transformKeys<Project>(response);
+}
 
-export const updateProject = async (
-  id: string,
-  projectData: Omit<Project, "id">
-): Promise<Project> => {
-  const response = await fetch(PROJECTS_API_URL, {
-    method: "PATCH",
-    headers: getAuthHeaders(),
-    body: JSON.stringify({
-      id: parseInt(id),
-      fields: {
-        "Area Name": projectData.areaName,
-        "Device S/N": projectData.deviceSN,
-        "Device Name": projectData.deviceName,
-        "Device Type": projectData.deviceType,
-        "Device Status":
-          projectData.deviceStatus === "ACTIVE" ? "Installed" : "Inactive",
-        Operator: projectData.operator,
-        "Installed Time": projectData.installedTime,
-        "Communication time": projectData.communicationTime,
-      },
-    }),
-  });
+/**
+ * Update an existing project
+ * @param id - The project ID
+ * @param data - The updated project data
+ * @returns Promise resolving to the updated project
+ */
+export async function updateProject(id: string, data: Partial<ProjectInput>): Promise<Project> {
+  const backendData: Record<string, unknown> = {};
+  if (data.name !== undefined) backendData.name = data.name;
+  if (data.description !== undefined) backendData.description = data.description;
+  if (data.areaName !== undefined) backendData.area_name = data.areaName;
+  if (data.location !== undefined) backendData.location = data.location;
+  if (data.status !== undefined) backendData.status = data.status;
 
-  if (!response.ok) {
-    if (response.status === 400) {
-      const errorData = await response.json();
-      throw new Error(
-        `Bad Request: ${errorData.msg || "Invalid data provided"}`
-      );
-    }
-    throw new Error(
-      `Failed to update project: ${response.status} ${response.statusText}`
-    );
-  }
+  const response = await apiClient.patch<Record<string, unknown>>(`/api/projects/${id}`, backendData);
+  return transformKeys<Project>(response);
+}
 
-  const data = await response.json();
+/**
+ * Delete a project
+ * @param id - The project ID
+ * @returns Promise resolving when the project is deleted
+ */
+export async function deleteProject(id: string): Promise<void> {
+  return apiClient.delete<void>(`/api/projects/${id}`);
+}
 
-  const updatedRecord = data.records?.[0];
-  if (!updatedRecord) {
-    throw new Error("Invalid response format: no record returned");
-  }
-
-  return {
-    id: updatedRecord.id.toString(),
-    areaName: updatedRecord.fields["Area Name"] ?? projectData.areaName,
-    deviceSN: updatedRecord.fields["Device S/N"] ?? projectData.deviceSN,
-    deviceName: updatedRecord.fields["Device Name"] ?? projectData.deviceName,
-    deviceType: updatedRecord.fields["Device Type"] ?? projectData.deviceType,
-    deviceStatus:
-      updatedRecord.fields["Device Status"] === "Installed"
-        ? "ACTIVE"
-        : "INACTIVE",
-    operator: updatedRecord.fields["Operator"] ?? projectData.operator,
-    installedTime:
-      updatedRecord.fields["Installed Time"] ?? projectData.installedTime,
-    communicationTime:
-      updatedRecord.fields["Communication time"] ??
-      projectData.communicationTime,
-  };
-};
-
-export const deleteProject = async (id: string): Promise<void> => {
-  const response = await fetch(PROJECTS_API_URL, {
-    method: "DELETE",
-    headers: getAuthHeaders(),
-    body: JSON.stringify({
-      id: id,
-    }),
-  });
-
-  if (!response.ok) {
-    if (response.status === 400) {
-      const errorData = await response.json();
-      throw new Error(
-        `Bad Request: ${errorData.msg || "Invalid data provided"}`
-      );
-    }
-    throw new Error(
-      `Failed to delete project: ${response.status} ${response.statusText}`
-    );
-  }
-};
+/**
+ * Fetch unique area names from all projects
+ * @returns Promise resolving to an array of unique area names
+ */
+export async function fetchProjectNames(): Promise<string[]> {
+  const projects = await fetchProjects();
+  const areaNames = [...new Set(projects.map(p => p.areaName).filter(Boolean))];
+  return areaNames;
+}

src/api/readings.ts

@@ -0,0 +1,186 @@
+/**
+ * Readings API
+ * Handles all meter reading-related API operations using the backend API client
+ */
+
+import { apiClient } from './client';
+
+// Helper to convert snake_case to camelCase
+function snakeToCamel(str: string): string {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+// Transform object keys from snake_case to camelCase
+function transformKeys<T>(obj: Record<string, unknown>): T {
+  const transformed: Record<string, unknown> = {};
+  for (const key in obj) {
+    const camelKey = snakeToCamel(key);
+    const value = obj[key];
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      transformed[camelKey] = transformKeys(value as Record<string, unknown>);
+    } else {
+      transformed[camelKey] = value;
+    }
+  }
+  return transformed as T;
+}
+
+// Transform array of objects
+function transformArray<T>(arr: Record<string, unknown>[]): T[] {
+  return arr.map(item => transformKeys<T>(item));
+}
+
+/**
+ * Meter reading entity from the backend
+ */
+export interface MeterReading {
+  id: string;
+  meterId: string;
+  deviceId: string | null;
+  readingValue: number;
+  readingType: string;
+  batteryLevel: number | null;
+  signalStrength: number | null;
+  rawPayload: string | null;
+  receivedAt: string;
+  createdAt: string;
+  // From join with meters
+  meterSerialNumber: string;
+  meterName: string;
+  areaName: string | null;
+  projectId: string;
+}
+
+/**
+ * Consumption summary statistics
+ */
+export interface ConsumptionSummary {
+  totalReadings: number;
+  totalMeters: number;
+  avgReading: number;
+  lastReadingDate: string | null;
+}
+
+/**
+ * Pagination info from API response
+ */
+export interface Pagination {
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages: number;
+}
+
+/**
+ * Paginated response
+ */
+export interface PaginatedResponse<T> {
+  data: T[];
+  pagination: Pagination;
+}
+
+/**
+ * Filters for fetching readings
+ */
+export interface ReadingFilters {
+  meterId?: string;
+  projectId?: string;
+  areaName?: string;
+  startDate?: string;
+  endDate?: string;
+  readingType?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+/**
+ * Fetch all readings with optional filtering and pagination
+ * @param filters - Optional filters for the query
+ * @returns Promise resolving to paginated readings
+ */
+export async function fetchReadings(filters?: ReadingFilters): Promise<PaginatedResponse<MeterReading>> {
+  const params: Record<string, string | number> = {};
+
+  if (filters?.meterId) params.meter_id = filters.meterId;
+  if (filters?.projectId) params.project_id = filters.projectId;
+  if (filters?.areaName) params.area_name = filters.areaName;
+  if (filters?.startDate) params.start_date = filters.startDate;
+  if (filters?.endDate) params.end_date = filters.endDate;
+  if (filters?.readingType) params.reading_type = filters.readingType;
+  if (filters?.page) params.page = filters.page;
+  if (filters?.pageSize) params.pageSize = filters.pageSize;
+
+  const response = await apiClient.get<{
+    data: Record<string, unknown>[];
+    pagination: Pagination;
+  }>('/api/readings', { params });
+
+  return {
+    data: transformArray<MeterReading>(response.data),
+    pagination: response.pagination,
+  };
+}
+
+/**
+ * Fetch a single reading by ID
+ * @param id - The reading ID
+ * @returns Promise resolving to the reading
+ */
+export async function fetchReading(id: string): Promise<MeterReading> {
+  const response = await apiClient.get<Record<string, unknown>>(`/api/readings/${id}`);
+  return transformKeys<MeterReading>(response);
+}
+
+/**
+ * Fetch consumption summary statistics
+ * @param projectId - Optional project ID to filter
+ * @returns Promise resolving to the summary
+ */
+export async function fetchConsumptionSummary(projectId?: string): Promise<ConsumptionSummary> {
+  const params = projectId ? { project_id: projectId } : undefined;
+  const response = await apiClient.get<Record<string, unknown>>('/api/readings/summary', { params });
+  return transformKeys<ConsumptionSummary>(response);
+}
+
+/**
+ * Input data for creating a reading
+ */
+export interface ReadingInput {
+  meterId: string;
+  deviceId?: string;
+  readingValue: number;
+  readingType?: string;
+  batteryLevel?: number;
+  signalStrength?: number;
+  rawPayload?: string;
+  receivedAt?: string;
+}
+
+/**
+ * Create a new reading
+ * @param data - The reading data
+ * @returns Promise resolving to the created reading
+ */
+export async function createReading(data: ReadingInput): Promise<MeterReading> {
+  const backendData = {
+    meter_id: data.meterId,
+    device_id: data.deviceId,
+    reading_value: data.readingValue,
+    reading_type: data.readingType,
+    battery_level: data.batteryLevel,
+    signal_strength: data.signalStrength,
+    raw_payload: data.rawPayload,
+    received_at: data.receivedAt,
+  };
+  const response = await apiClient.post<Record<string, unknown>>('/api/readings', backendData);
+  return transformKeys<MeterReading>(response);
+}
+
+/**
+ * Delete a reading
+ * @param id - The reading ID
+ * @returns Promise resolving when the reading is deleted
+ */
+export async function deleteReading(id: string): Promise<void> {
+  return apiClient.delete<void>(`/api/readings/${id}`);
+}

src/api/types.ts

@@ -0,0 +1,133 @@
+/**
+ * API Types and Error Classes
+ * Common types used across the API client
+ */
+
+/**
+ * Standard API response wrapper for successful responses
+ */
+export interface ApiSuccessResponse<T> {
+  success: true;
+  data: T;
+}
+
+/**
+ * Standard API response wrapper for error responses
+ */
+export interface ApiErrorResponse {
+  success: false;
+  error: {
+    message: string;
+    errors?: string[];
+  };
+}
+
+/**
+ * Union type for all API responses
+ */
+export type ApiResponse<T> = ApiSuccessResponse<T> | ApiErrorResponse;
+
+/**
+ * Pagination metadata
+ */
+export interface PaginationMeta {
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages: number;
+}
+
+/**
+ * Paginated response wrapper
+ */
+export interface PaginatedResponse<T> {
+  success: true;
+  data: T[];
+  pagination: PaginationMeta;
+}
+
+/**
+ * Custom API Error class with status code and validation errors
+ */
+export class ApiError extends Error {
+  public readonly status: number;
+  public readonly errors?: string[];
+
+  constructor(message: string, status: number, errors?: string[]) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.errors = errors;
+
+    // Ensure instanceof works correctly
+    Object.setPrototypeOf(this, ApiError.prototype);
+  }
+
+  /**
+   * Check if this error is an authentication error
+   */
+  isAuthError(): boolean {
+    return this.status === 401;
+  }
+
+  /**
+   * Check if this error is a forbidden error
+   */
+  isForbiddenError(): boolean {
+    return this.status === 403;
+  }
+
+  /**
+   * Check if this error is a not found error
+   */
+  isNotFoundError(): boolean {
+    return this.status === 404;
+  }
+
+  /**
+   * Check if this error is a validation error
+   */
+  isValidationError(): boolean {
+    return this.status === 400 || this.status === 422;
+  }
+
+  /**
+   * Check if this error is a server error
+   */
+  isServerError(): boolean {
+    return this.status >= 500;
+  }
+
+  /**
+   * Convert error to a plain object for logging or serialization
+   */
+  toJSON(): Record<string, unknown> {
+    return {
+      name: this.name,
+      message: this.message,
+      status: this.status,
+      errors: this.errors,
+    };
+  }
+}
+
+/**
+ * Type guard to check if a response is successful
+ */
+export function isApiSuccess<T>(response: ApiResponse<T>): response is ApiSuccessResponse<T> {
+  return response.success === true;
+}
+
+/**
+ * Type guard to check if a response is an error
+ */
+export function isApiError<T>(response: ApiResponse<T>): response is ApiErrorResponse {
+  return response.success === false;
+}
+
+/**
+ * Type guard to check if an error is an ApiError instance
+ */
+export function isApiErrorInstance(error: unknown): error is ApiError {
+  return error instanceof ApiError;
+}

src/components/layout/Sidebar.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import {
   Home,
   Settings,
-  WaterDrop,
   ExpandMore,
   ExpandLess,
   Menu,
@@ -106,6 +105,15 @@ export default function Sidebar({ setPage }: SidebarProps) {
                     Meters
                   </button>
                 </li>
+
+                <li>
+                  <button
+                    onClick={() => setPage("consumption")}
+                    className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
+                  >
+                    Consumo
+                  </button>
+                </li>
               </ul>
             )}
           </li>

src/pages/Home.tsx

@@ -117,7 +117,7 @@ export default function Home({
   );
 
   const filteredProjects = useMemo(
-    () => [...new Set(filteredMeters.map((m) => m.areaName))],
+    () => [...new Set(filteredMeters.map((m) => m.projectName))].filter(Boolean) as string[],
     [filteredMeters]
   );
 
@@ -125,7 +125,7 @@ export default function Home({
     () =>
       filteredProjects.map((projectName) => ({
         name: projectName,
-        meterCount: filteredMeters.filter((m) => m.areaName === projectName)
+        meterCount: filteredMeters.filter((m) => m.projectName === projectName)
           .length,
       })),
     [filteredProjects, filteredMeters]

src/pages/LoginPage.tsx

@@ -1,27 +1,26 @@
 import { useMemo, useState } from "react";
-import { Lock, User, Eye, EyeOff, Loader2, Check } from "lucide-react";
+import { Lock, Mail, Eye, EyeOff, Loader2 } from "lucide-react";
 import grhWatermark from "../assets/images/grhWatermark.png";
+import { login } from "../api/auth";
 
-type Form = { usuario: string; contrasena: string };
+type Form = { email: string; password: string };
 
 type LoginPageProps = {
-  onSuccess: (payload?: { token?: string }) => void;
+  onSuccess: () => void;
 };
 
 export default function LoginPage({ onSuccess }: LoginPageProps) {
-  const [form, setForm] = useState<Form>({ usuario: "", contrasena: "" });
+  const [form, setForm] = useState<Form>({ email: "", password: "" });
   const [showPass, setShowPass] = useState(false);
   const [loading, setLoading] = useState(false);
   const [serverError, setServerError] = useState("");
-  const [notRobot, setNotRobot] = useState(false);
 
   const errors = useMemo(() => {
-    const e: Partial<Record<keyof Form | "robot", string>> = {};
-    if (!form.usuario.trim()) e.usuario = "El usuario es obligatorio.";
-    if (!form.contrasena) e.contrasena = "La contraseña es obligatoria.";
-    if (!notRobot) e.robot = "Confirma que no eres un robot.";
+    const e: Partial<Record<keyof Form, string>> = {};
+    if (!form.email.trim()) e.email = "El correo es obligatorio.";
+    if (!form.password) e.password = "La contraseña es obligatoria.";
     return e;
-  }, [form.usuario, form.contrasena, notRobot]);
+  }, [form.email, form.password]);
 
   const canSubmit = Object.keys(errors).length === 0 && !loading;
 
@@ -30,12 +29,13 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
     setServerError("");
     if (!canSubmit) return;
 
+    setLoading(true);
     try {
-      setLoading(true);
-      await new Promise((r) => setTimeout(r, 700));
-      onSuccess({ token: "demo" });
-    } catch {
-      setServerError("No se pudo iniciar sesión. Verifica tus datos.");
+      await login({ email: form.email, password: form.password });
+      // Tokens are stored by the auth module
+      onSuccess();
+    } catch (err) {
+      setServerError(err instanceof Error ? err.message : "Error de autenticación");
     } finally {
       setLoading(false);
     }
@@ -111,27 +111,28 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
                     </div>
                   )}
 
-                  {/* Usuario */}
+                  {/* Email */}
                   <div>
                     <label className="block text-sm font-medium text-slate-700">
-                      Usuario
+                      Correo electrónico
                     </label>
                     <div className="relative mt-2">
                       <input
-                        value={form.usuario}
+                        type="email"
+                        value={form.email}
                         onChange={(e) =>
-                          setForm((s) => ({ ...s, usuario: e.target.value }))
+                          setForm((s) => ({ ...s, email: e.target.value }))
                         }
                         className="w-full border-b border-slate-300 py-2 pr-10 outline-none focus:border-slate-600"
                       />
-                      <User
+                      <Mail
                         className="absolute right-1 top-1/2 -translate-y-1/2 text-slate-500"
                         size={18}
                       />
                     </div>
-                    {errors.usuario && (
+                    {errors.email && (
                       <p className="mt-1 text-xs text-red-600">
-                        {errors.usuario}
+                        {errors.email}
                       </p>
                     )}
                   </div>
@@ -143,9 +144,9 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
                     </label>
                     <div className="relative mt-2">
                       <input
-                        value={form.contrasena}
+                        value={form.password}
                         onChange={(e) =>
-                          setForm((s) => ({ ...s, contrasena: e.target.value }))
+                          setForm((s) => ({ ...s, password: e.target.value }))
                         }
                         type={showPass ? "text" : "password"}
                         className="w-full border-b border-slate-300 py-2 pr-16 outline-none focus:border-slate-600"
@@ -162,36 +163,13 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
                         size={18}
                       />
                     </div>
-                    {errors.contrasena && (
+                    {errors.password && (
                       <p className="mt-1 text-xs text-red-600">
-                        {errors.contrasena}
+                        {errors.password}
                       </p>
                     )}
                   </div>
 
-                  {/* NO SOY UN ROBOT */}
-                  <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
-                    <button
-                      type="button"
-                      onClick={() => setNotRobot((v) => !v)}
-                      className={`h-5 w-5 rounded border flex items-center justify-center ${
-                        notRobot
-                          ? "bg-blue-600 border-blue-600 text-white"
-                          : "bg-white border-slate-300"
-                      }`}
-                    >
-                      {notRobot && <Check size={14} />}
-                    </button>
-                    <span className="text-sm text-slate-700">No soy un robot</span>
-                    <span className="ml-auto text-xs text-slate-400">
-                      reCAPTCHA
-                    </span>
-                  </div>
-
-                  {errors.robot && (
-                    <p className="text-xs text-red-600">{errors.robot}</p>
-                  )}
-
                   {/* Botón */}
                   <button
                     type="submit"

src/pages/concentrators/ConcentratorsModal.tsx

@@ -1,381 +1,191 @@
-// src/pages/concentrators/ConcentratorsModal.tsx
 import type React from "react";
-import type { Concentrator } from "../../api/concentrators";
-import type { GatewayData } from "./ConcentratorsPage";
+import { useEffect, useState } from "react";
+import type { ConcentratorInput } from "../../api/concentrators";
+import { fetchProjects, type Project } from "../../api/projects";
 
 type Props = {
-  editingSerial: string | null;
-
-  form: Omit<Concentrator, "id">;
-  setForm: React.Dispatch<React.SetStateAction<Omit<Concentrator, "id">>>;
-
-  gatewayForm: GatewayData;
-  setGatewayForm: React.Dispatch<React.SetStateAction<GatewayData>>;
-
+  editingId: string | null;
+  form: ConcentratorInput;
+  setForm: React.Dispatch<React.SetStateAction<ConcentratorInput>>;
   errors: Record<string, boolean>;
   setErrors: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-
-  toDatetimeLocalValue: (value?: string) => string;
-  fromDatetimeLocalValue: (value: string) => string;
-
+  allProjects: string[];
   onClose: () => void;
   onSave: () => void | Promise<void>;
 };
 
 export default function ConcentratorsModal({
-  editingSerial,
+  editingId,
   form,
   setForm,
-  gatewayForm,
-  setGatewayForm,
   errors,
   setErrors,
-  toDatetimeLocalValue,
-  fromDatetimeLocalValue,
   onClose,
   onSave,
 }: Props) {
-  const title = editingSerial ? "Edit Concentrator" : "Add Concentrator";
+  const title = editingId ? "Editar Concentrador" : "Agregar Concentrador";
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loadingProjects, setLoadingProjects] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await fetchProjects();
+        setProjects(data);
+      } catch (error) {
+        console.error("Error loading projects:", error);
+      } finally {
+        setLoadingProjects(false);
+      }
+    };
+    load();
+  }, []);
 
   return (
     <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 w-[700px] max-h-[90vh] overflow-y-auto space-y-4">
+      <div className="bg-white rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
         <h2 className="text-lg font-semibold">{title}</h2>
 
-        {/* FORM */}
         <div className="space-y-3">
           <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
-            Concentrator Information
+            Información del Concentrador
           </h3>
 
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <input
-                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50"
-                placeholder="Area Name"
-                value={form["Area Name"] ?? ""}
-                disabled
-              />
-              <p className="text-xs text-gray-400 mt-1">
-                El proyecto seleccionado define el Area Name.
-              </p>
-            </div>
-
-            <div>
+              <label className="block text-sm text-gray-600 mb-1">Serial *</label>
               <input
                 className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Device S/N"] ? "border-red-500" : ""
+                  errors["serialNumber"] ? "border-red-500" : ""
                 }`}
-                placeholder="Device S/N *"
-                value={form["Device S/N"]}
+                placeholder="Número de serie"
+                value={form.serialNumber}
                 onChange={(e) => {
-                  setForm({ ...form, "Device S/N": e.target.value });
-                  if (errors["Device S/N"])
-                    setErrors({ ...errors, "Device S/N": false });
+                  setForm({ ...form, serialNumber: e.target.value });
+                  if (errors["serialNumber"]) setErrors({ ...errors, serialNumber: false });
                 }}
                 required
               />
-              {errors["Device S/N"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Device Name"] ? "border-red-500" : ""
-                }`}
-                placeholder="Device Name *"
-                value={form["Device Name"]}
-                onChange={(e) => {
-                  setForm({ ...form, "Device Name": e.target.value });
-                  if (errors["Device Name"])
-                    setErrors({ ...errors, "Device Name": false });
-                }}
-                required
-              />
-              {errors["Device Name"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
+              {errors["serialNumber"] && (
+                <p className="text-red-500 text-xs mt-1">Campo requerido</p>
               )}
             </div>
 
             <div>
-              <select
-                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                value={form["Device Status"]}
-                onChange={(e) =>
-                  setForm({
-                    ...form,
-                    "Device Status": e.target.value as any,
-                  })
-                }
-              >
-                <option value="ACTIVE">ACTIVE</option>
-                <option value="INACTIVE">INACTIVE</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
+              <label className="block text-sm text-gray-600 mb-1">Nombre *</label>
               <input
                 className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Operator"] ? "border-red-500" : ""
+                  errors["name"] ? "border-red-500" : ""
                 }`}
-                placeholder="Operator *"
-                value={form["Operator"]}
+                placeholder="Nombre del concentrador"
+                value={form.name}
                 onChange={(e) => {
-                  setForm({ ...form, Operator: e.target.value });
-                  if (errors["Operator"])
-                    setErrors({ ...errors, Operator: false });
+                  setForm({ ...form, name: e.target.value });
+                  if (errors["name"]) setErrors({ ...errors, name: false });
                 }}
                 required
               />
-              {errors["Operator"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
-            </div>
-
-            <div>
-              <input
-                type="date"
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Installed Time"] ? "border-red-500" : ""
-                }`}
-                value={(form["Installed Time"] ?? "").slice(0, 10)}
-                onChange={(e) => {
-                  setForm({ ...form, "Installed Time": e.target.value });
-                  if (errors["Installed Time"])
-                    setErrors({ ...errors, "Installed Time": false });
-                }}
-                required
-              />
-              {errors["Installed Time"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <input
-                type="datetime-local"
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Device Time"] ? "border-red-500" : ""
-                }`}
-                value={toDatetimeLocalValue(form["Device Time"])}
-                onChange={(e) => {
-                  setForm({
-                    ...form,
-                    "Device Time": fromDatetimeLocalValue(e.target.value),
-                  });
-                  if (errors["Device Time"])
-                    setErrors({ ...errors, "Device Time": false });
-                }}
-                required
-              />
-              {errors["Device Time"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
-            </div>
-
-            <div>
-              <input
-                type="datetime-local"
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Communication Time"] ? "border-red-500" : ""
-                }`}
-                value={toDatetimeLocalValue(form["Communication Time"])}
-                onChange={(e) => {
-                  setForm({
-                    ...form,
-                    "Communication Time": fromDatetimeLocalValue(e.target.value),
-                  });
-                  if (errors["Communication Time"])
-                    setErrors({ ...errors, "Communication Time": false });
-                }}
-                required
-              />
-              {errors["Communication Time"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
+              {errors["name"] && <p className="text-red-500 text-xs mt-1">Campo requerido</p>}
             </div>
           </div>
 
           <div>
-            <input
+            <label className="block text-sm text-gray-600 mb-1">Proyecto *</label>
+            <select
               className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["Instruction Manual"] ? "border-red-500" : ""
+                errors["projectId"] ? "border-red-500" : ""
               }`}
-              placeholder="Instruction Manual *"
-              value={form["Instruction Manual"]}
+              value={form.projectId}
               onChange={(e) => {
-                setForm({ ...form, "Instruction Manual": e.target.value });
-                if (errors["Instruction Manual"])
-                  setErrors({ ...errors, "Instruction Manual": false });
+                setForm({ ...form, projectId: e.target.value });
+                if (errors["projectId"]) setErrors({ ...errors, projectId: false });
               }}
+              disabled={loadingProjects}
               required
-            />
-            {errors["Instruction Manual"] && (
-              <p className="text-red-500 text-xs mt-1">
-                This field is required
-              </p>
+            >
+              <option value="">
+                {loadingProjects ? "Cargando..." : "Selecciona un proyecto"}
+              </option>
+              {projects.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name}
+                </option>
+              ))}
+            </select>
+            {errors["projectId"] && (
+              <p className="text-red-500 text-xs mt-1">Selecciona un proyecto</p>
             )}
           </div>
-        </div>
 
-        {/* GATEWAY */}
-        <div className="space-y-3 pt-4">
-          <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
-            Gateway Configuration
-          </h3>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <input
-                type="number"
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Gateway ID"] ? "border-red-500" : ""
-                }`}
-                placeholder="Gateway ID *"
-                value={gatewayForm["Gateway ID"] || ""}
-                onChange={(e) => {
-                  setGatewayForm({
-                    ...gatewayForm,
-                    "Gateway ID": parseInt(e.target.value) || 0,
-                  });
-                  if (errors["Gateway ID"])
-                    setErrors({ ...errors, "Gateway ID": false });
-                }}
-                required
-                min={1}
-              />
-              {errors["Gateway ID"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
-            </div>
-
-            <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Gateway EUI"] ? "border-red-500" : ""
-                }`}
-                placeholder="Gateway EUI *"
-                value={gatewayForm["Gateway EUI"]}
-                onChange={(e) => {
-                  setGatewayForm({
-                    ...gatewayForm,
-                    "Gateway EUI": e.target.value,
-                  });
-                  if (errors["Gateway EUI"])
-                    setErrors({ ...errors, "Gateway EUI": false });
-                }}
-                required
-              />
-              {errors["Gateway EUI"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
-            </div>
+          <div>
+            <label className="block text-sm text-gray-600 mb-1">Ubicación</label>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Ubicación del concentrador (opcional)"
+              value={form.location ?? ""}
+              onChange={(e) => setForm({ ...form, location: e.target.value || undefined })}
+            />
           </div>
 
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Gateway Name"] ? "border-red-500" : ""
-                }`}
-                placeholder="Gateway Name *"
-                value={gatewayForm["Gateway Name"]}
-                onChange={(e) => {
-                  setGatewayForm({
-                    ...gatewayForm,
-                    "Gateway Name": e.target.value,
-                  });
-                  if (errors["Gateway Name"])
-                    setErrors({ ...errors, "Gateway Name": false });
-                }}
-                required
-              />
-              {errors["Gateway Name"] && (
-                <p className="text-red-500 text-xs mt-1">
-                  This field is required
-                </p>
-              )}
+              <label className="block text-sm text-gray-600 mb-1">Tipo *</label>
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={form.type ?? "LORA"}
+                onChange={(e) => setForm({ ...form, type: e.target.value as "LORA" | "LORAWAN" | "GRANDES" })}
+              >
+                <option value="LORA">LoRa</option>
+                <option value="LORAWAN">LoRaWAN</option>
+                <option value="GRANDES">Grandes Consumidores</option>
+              </select>
             </div>
 
             <div>
+              <label className="block text-sm text-gray-600 mb-1">Estado</label>
               <select
                 className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                value={gatewayForm["Antenna Placement"]}
-                onChange={(e) =>
-                  setGatewayForm({
-                    ...gatewayForm,
-                    "Antenna Placement": e.target.value as "Indoor" | "Outdoor",
-                  })
-                }
+                value={form.status ?? "ACTIVE"}
+                onChange={(e) => setForm({ ...form, status: e.target.value })}
               >
-                <option value="Indoor">Indoor</option>
-                <option value="Outdoor">Outdoor</option>
+                <option value="ACTIVE">Activo</option>
+                <option value="INACTIVE">Inactivo</option>
+                <option value="MAINTENANCE">Mantenimiento</option>
+                <option value="OFFLINE">Sin conexión</option>
               </select>
             </div>
           </div>
 
           <div>
+            <label className="block text-sm text-gray-600 mb-1">Dirección IP</label>
             <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["Gateway Description"] ? "border-red-500" : ""
-              }`}
-              placeholder="Gateway Description *"
-              value={gatewayForm["Gateway Description"]}
-              onChange={(e) => {
-                setGatewayForm({
-                  ...gatewayForm,
-                  "Gateway Description": e.target.value,
-                });
-                if (errors["Gateway Description"])
-                  setErrors({ ...errors, "Gateway Description": false });
-              }}
-              required
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="192.168.1.100"
+              value={form.ipAddress ?? ""}
+              onChange={(e) => setForm({ ...form, ipAddress: e.target.value || undefined })}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm text-gray-600 mb-1">Versión de Firmware</label>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="v1.0.0"
+              value={form.firmwareVersion ?? ""}
+              onChange={(e) => setForm({ ...form, firmwareVersion: e.target.value || undefined })}
             />
-            {errors["Gateway Description"] && (
-              <p className="text-red-500 text-xs mt-1">
-                This field is required
-              </p>
-            )}
           </div>
         </div>
 
-        {/* ACTIONS */}
         <div className="flex justify-end gap-2 pt-3 border-t">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 rounded hover:bg-gray-100"
-          >
-            Cancel
+          <button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
+            Cancelar
           </button>
           <button
             onClick={onSave}
             className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
           >
-            Save
+            Guardar
           </button>
         </div>
       </div>

src/pages/concentrators/ConcentratorsPage.tsx

@@ -1,23 +1,23 @@
-// src/pages/concentrators/ConcentratorsPage.tsx
 import { useMemo, useState } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 
 import ConfirmModal from "../../components/layout/common/ConfirmModal";
-
-import { createConcentrator, deleteConcentrator, updateConcentrator, type Concentrator } from "../../api/concentrators";
-
-// ✅ hook es named export y pide currentUser
+import {
+  createConcentrator,
+  deleteConcentrator,
+  updateConcentrator,
+  type Concentrator,
+  type ConcentratorInput,
+} from "../../api/concentrators";
 import { useConcentrators } from "./useConcentrators";
-
-// ✅ UI pieces
 import ConcentratorsSidebar from "./ConcentratorsSidebar";
 import ConcentratorsTable from "./ConcentratorsTable";
 import ConcentratorsModal from "./ConcentratorsModal";
 
-
 export type SampleView = "GENERAL" | "LORA" | "LORAWAN" | "GRANDES";
 export type ProjectStatus = "ACTIVO" | "INACTIVO";
 export type ProjectCard = {
+  id: string;
   name: string;
   region: string;
   projects: number;
@@ -33,91 +33,53 @@ type User = {
   project?: string;
 };
 
-export type GatewayData = {
-  "Gateway ID": number;
-  "Gateway EUI": string;
-  "Gateway Name": string;
-  "Gateway Description": string;
-  "Antenna Placement": "Indoor" | "Outdoor";
-  concentratorId?: string;
-};
-
 export default function ConcentratorsPage() {
-  // ✅ Simulación de usuario actual 
   const currentUser: User = {
     role: "SUPER_ADMIN",
     project: "CESPT",
   };
 
-  // ✅ Hook (solo cubre: projects + fetch + sampleView + selectedProject + loading + projectsData)
   const c = useConcentrators(currentUser);
 
-
   const [typesMenuOpen, setTypesMenuOpen] = useState(false);
-
   const [search, setSearch] = useState("");
   const [activeConcentrator, setActiveConcentrator] = useState<Concentrator | null>(null);
-
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
-
   const [showModal, setShowModal] = useState(false);
-  const [editingSerial, setEditingSerial] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
 
-  const getEmptyConcentrator = (): Omit<Concentrator, "id"> => ({
-    "Area Name": c.selectedProject,
-    "Device S/N": "",
-    "Device Name": "",
-    "Device Time": new Date().toISOString(),
-    "Device Status": "ACTIVE",
-    Operator: "",
-    "Installed Time": new Date().toISOString().slice(0, 10),
-    "Communication Time": new Date().toISOString(),
-    "Instruction Manual": "",
+  const getEmptyForm = (): ConcentratorInput => ({
+    serialNumber: "",
+    name: "",
+    projectId: "",
+    location: "",
+    type: "LORA",
+    status: "ACTIVE",
+    ipAddress: "",
+    firmwareVersion: "",
   });
 
-  const getEmptyGatewayData = (): GatewayData => ({
-    "Gateway ID": 0,
-    "Gateway EUI": "",
-    "Gateway Name": "",
-    "Gateway Description": "",
-    "Antenna Placement": "Indoor",
-  });
+  const [form, setForm] = useState<ConcentratorInput>(getEmptyForm());
+  const [errors, setErrors] = useState<Record<string, boolean>>({});
 
-  const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
-  const [gatewayForm, setGatewayForm] = useState<GatewayData>(getEmptyGatewayData());
-  const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
-
-  // ✅ Tabla filtrada por search (usa lo que YA filtró el hook por proyecto)
   const searchFiltered = useMemo(() => {
     if (!c.isGeneral) return [];
     return c.filteredConcentrators.filter((row) => {
       const q = search.trim().toLowerCase();
       if (!q) return true;
-      const name = (row["Device Name"] ?? "").toLowerCase();
-      const sn = (row["Device S/N"] ?? "").toLowerCase();
+      const name = (row.name ?? "").toLowerCase();
+      const sn = (row.serialNumber ?? "").toLowerCase();
       return name.includes(q) || sn.includes(q);
     });
   }, [c.filteredConcentrators, c.isGeneral, search]);
 
-  // =========================
-  // CRUD (solo GENERAL)
-  // =========================
   const validateForm = () => {
-    const next: { [key: string]: boolean } = {};
+    const next: Record<string, boolean> = {};
 
-    if (!form["Device Name"].trim()) next["Device Name"] = true;
-    if (!form["Device S/N"].trim()) next["Device S/N"] = true;
-    if (!form["Operator"].trim()) next["Operator"] = true;
-    if (!form["Instruction Manual"].trim()) next["Instruction Manual"] = true;
-    if (!form["Installed Time"]) next["Installed Time"] = true;
-    if (!form["Device Time"]) next["Device Time"] = true;
-    if (!form["Communication Time"]) next["Communication Time"] = true;
-
-    if (!gatewayForm["Gateway ID"] || gatewayForm["Gateway ID"] === 0) next["Gateway ID"] = true;
-    if (!gatewayForm["Gateway EUI"].trim()) next["Gateway EUI"] = true;
-    if (!gatewayForm["Gateway Name"].trim()) next["Gateway Name"] = true;
-    if (!gatewayForm["Gateway Description"].trim()) next["Gateway Description"] = true;
+    if (!form.name.trim()) next["name"] = true;
+    if (!form.serialNumber.trim()) next["serialNumber"] = true;
+    if (!form.projectId.trim()) next["projectId"] = true;
 
     setErrors(next);
     return Object.keys(next).length === 0;
@@ -128,23 +90,17 @@ export default function ConcentratorsPage() {
     if (!validateForm()) return;
 
     try {
-      if (editingSerial) {
-        const toUpdate = c.concentrators.find((x) => x["Device S/N"] === editingSerial);
-        if (!toUpdate) throw new Error("Concentrator not found");
-
-        const updated = await updateConcentrator(toUpdate.id, form);
-
-        // actualiza en memoria (el hook expone setConcentrators)
-        c.setConcentrators((prev) => prev.map((x) => (x.id === toUpdate.id ? updated : x)));
+      if (editingId) {
+        const updated = await updateConcentrator(editingId, form);
+        c.setConcentrators((prev) => prev.map((x) => (x.id === editingId ? updated : x)));
       } else {
         const created = await createConcentrator(form);
         c.setConcentrators((prev) => [...prev, created]);
       }
 
       setShowModal(false);
-      setEditingSerial(null);
-      setForm({ ...getEmptyConcentrator(), "Area Name": c.selectedProject });
-      setGatewayForm(getEmptyGatewayData());
+      setEditingId(null);
+      setForm(getEmptyForm());
       setErrors({});
       setActiveConcentrator(null);
     } catch (err) {
@@ -167,28 +123,32 @@ export default function ConcentratorsPage() {
     }
   };
 
-  // =========================
-  // Date helpers para modal
-  // =========================
-  function toDatetimeLocalValue(value?: string) {
-    if (!value) return "";
-    const d = new Date(value);
-    if (Number.isNaN(d.getTime())) return "";
-    const pad = (n: number) => String(n).padStart(2, "0");
-    const yyyy = d.getFullYear();
-    const mm = pad(d.getMonth() + 1);
-    const dd = pad(d.getDate());
-    const hh = pad(d.getHours());
-    const mi = pad(d.getMinutes());
-    return `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
-  }
+  const openEditModal = () => {
+    if (!c.isGeneral || !activeConcentrator) return;
 
-  function fromDatetimeLocalValue(value: string) {
-    if (!value) return "";
-    const d = new Date(value);
-    if (Number.isNaN(d.getTime())) return "";
-    return d.toISOString();
-  }
+    setEditingId(activeConcentrator.id);
+    setForm({
+      serialNumber: activeConcentrator.serialNumber,
+      name: activeConcentrator.name,
+      projectId: activeConcentrator.projectId,
+      location: activeConcentrator.location ?? "",
+      type: activeConcentrator.type ?? "LORA",
+      status: activeConcentrator.status,
+      ipAddress: activeConcentrator.ipAddress ?? "",
+      firmwareVersion: activeConcentrator.firmwareVersion ?? "",
+    });
+    setErrors({});
+    setShowModal(true);
+  };
+
+  const openCreateModal = () => {
+    if (!c.isGeneral) return;
+
+    setForm(getEmptyForm());
+    setErrors({});
+    setEditingId(null);
+    setShowModal(true);
+  };
 
   return (
     <div className="flex gap-6 p-6 w-full bg-gray-100">
@@ -202,8 +162,6 @@ export default function ConcentratorsPage() {
           onChangeSampleView={(next: SampleView) => {
             c.setSampleView(next);
             setTypesMenuOpen(false);
-
-            // resets UI
             c.setSelectedProject("");
             setActiveConcentrator(null);
             setSearch("");
@@ -238,46 +196,15 @@ export default function ConcentratorsPage() {
 
           <div className="flex gap-3">
             <button
-              onClick={() => {
-                if (!c.isGeneral) return;
-                if (!c.selectedProject) return;
-
-                setForm({ ...getEmptyConcentrator(), "Area Name": c.selectedProject });
-                setGatewayForm(getEmptyGatewayData());
-                setErrors({});
-                setEditingSerial(null);
-                setShowModal(true);
-              }}
-              disabled={!c.isGeneral || !c.selectedProject}
+              onClick={openCreateModal}
+              disabled={!c.isGeneral || c.allProjects.length === 0}
               className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <Plus size={16} /> Agregar
             </button>
 
             <button
-              onClick={() => {
-                if (!c.isGeneral) return;
-                if (!activeConcentrator) return;
-
-                const a = activeConcentrator;
-                setEditingSerial(a["Device S/N"]);
-
-                setForm({
-                  "Area Name": a["Area Name"],
-                  "Device S/N": a["Device S/N"],
-                  "Device Name": a["Device Name"],
-                  "Device Time": a["Device Time"],
-                  "Device Status": a["Device Status"],
-                  Operator: a["Operator"],
-                  "Installed Time": a["Installed Time"],
-                  "Communication Time": a["Communication Time"],
-                  "Instruction Manual": a["Instruction Manual"],
-                });
-
-                setGatewayForm(getEmptyGatewayData());
-                setErrors({});
-                setShowModal(true);
-              }}
+              onClick={openEditModal}
               disabled={!c.isGeneral || !activeConcentrator}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
@@ -304,7 +231,7 @@ export default function ConcentratorsPage() {
 
         <input
           className="bg-white rounded-lg shadow px-4 py-2 text-sm"
-          placeholder={c.isGeneral ? "Search concentrator..." : "Search disabled in mock views"}
+          placeholder={c.isGeneral ? "Buscar concentrador..." : "Search disabled in mock views"}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           disabled={!c.isGeneral || !c.selectedProject}
@@ -320,10 +247,10 @@ export default function ConcentratorsPage() {
               !c.isGeneral
                 ? `Vista "${c.sampleViewLabel}" está en modo mock (sin backend todavía).`
                 : !c.selectedProject
-                ? "Select a project to view concentrators."
+                ? "Selecciona un proyecto para ver los concentradores."
                 : c.loadingConcentrators
-                ? "Loading concentrators..."
-                : "No concentrators found. Click 'Add' to create your first concentrator."
+                ? "Cargando concentradores..."
+                : "No hay concentradores. Haz clic en 'Agregar' para crear uno."
             }
           />
         </div>
@@ -332,8 +259,8 @@ export default function ConcentratorsPage() {
           open={confirmOpen}
           title="Eliminar concentrador"
           message={`¿Estás seguro que quieres eliminar "${
-            activeConcentrator?.["Device Name"] ?? "este concentrador"
-          }"? Esta acción no se puede deshacer.`}
+            activeConcentrator?.name ?? "este concentrador"
+          }" (${activeConcentrator?.serialNumber ?? "—"})? Esta acción no se puede deshacer.`}
           confirmText="Eliminar"
           cancelText="Cancelar"
           danger
@@ -354,18 +281,14 @@ export default function ConcentratorsPage() {
 
       {showModal && c.isGeneral && (
         <ConcentratorsModal
-          editingSerial={editingSerial}
+          editingId={editingId}
           form={form}
           setForm={setForm}
-          gatewayForm={gatewayForm}
-          setGatewayForm={setGatewayForm}
           errors={errors}
           setErrors={setErrors}
-          toDatetimeLocalValue={toDatetimeLocalValue}
-          fromDatetimeLocalValue={fromDatetimeLocalValue}
+          allProjects={c.allProjects}
           onClose={() => {
             setShowModal(false);
-            setGatewayForm(getEmptyGatewayData());
             setErrors({});
           }}
           onSave={handleSave}

src/pages/concentrators/ConcentratorsSidebar.tsx

@@ -59,7 +59,9 @@ export default function ConcentratorsSidebar({
             Tipo: <span className="font-semibold">{sampleViewLabel}</span>
             {" • "}
             Seleccionado:{" "}
-            <span className="font-semibold">{selectedProject || "—"}</span>
+            <span className="font-semibold">
+              {projects.find((p) => p.id === selectedProject)?.name || "—"}
+            </span>
           </p>
         </div>
 
@@ -132,12 +134,12 @@ export default function ConcentratorsSidebar({
           </div>
         ) : (
           projects.map((p) => {
-            const active = p.name === selectedProject;
+            const active = p.id === selectedProject;
 
             return (
               <div
-                key={p.name}
-                onClick={() => onSelectProject(p.name)}
+                key={p.id}
+                onClick={() => onSelectProject(p.id)}
                 className={[
                   "rounded-xl border p-4 transition cursor-pointer",
                   active
@@ -211,7 +213,7 @@ export default function ConcentratorsSidebar({
                     ].join(" ")}
                     onClick={(e) => {
                       e.stopPropagation();
-                      onSelectProject(p.name);
+                      onSelectProject(p.id);
                     }}
                   >
                     {active ? "Seleccionado" : "Seleccionar"}

src/pages/concentrators/ConcentratorsTable.tsx

@@ -23,45 +23,69 @@ export default function ConcentratorsTable({
       isLoading={isLoading}
       columns={[
         {
-          title: "Device Name",
-          field: "Device Name",
-          render: (rowData: any) => rowData["Device Name"] || "-",
+          title: "Serial",
+          field: "serialNumber",
+          render: (rowData: Concentrator) => rowData.serialNumber || "-",
         },
         {
-          title: "Device S/N",
-          field: "Device S/N",
-          render: (rowData: any) => rowData["Device S/N"] || "-",
+          title: "Nombre",
+          field: "name",
+          render: (rowData: Concentrator) => rowData.name || "-",
         },
         {
-          title: "Device Status",
-          field: "Device Status",
-          render: (rowData: any) => (
+          title: "Tipo",
+          field: "type",
+          render: (rowData: Concentrator) => {
+            const typeLabels: Record<string, string> = {
+              LORA: "LoRa",
+              LORAWAN: "LoRaWAN",
+              GRANDES: "Grandes Consumidores",
+            };
+            const typeColors: Record<string, string> = {
+              LORA: "text-green-600 border-green-600",
+              LORAWAN: "text-purple-600 border-purple-600",
+              GRANDES: "text-orange-600 border-orange-600",
+            };
+            const type = rowData.type || "LORA";
+            return (
+              <span
+                className={`px-3 py-1 rounded-full text-xs font-semibold border ${typeColors[type] || "text-gray-600 border-gray-600"}`}
+              >
+                {typeLabels[type] || type}
+              </span>
+            );
+          },
+        },
+        {
+          title: "Estado",
+          field: "status",
+          render: (rowData: Concentrator) => (
             <span
               className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                rowData["Device Status"] === "ACTIVE"
+                rowData.status === "ACTIVE"
                   ? "text-blue-600 border-blue-600"
                   : "text-red-600 border-red-600"
               }`}
             >
-              {rowData["Device Status"] || "-"}
+              {rowData.status || "-"}
             </span>
           ),
         },
         {
-          title: "Operator",
-          field: "Operator",
-          render: (rowData: any) => rowData["Operator"] || "-",
+          title: "Ubicación",
+          field: "location",
+          render: (rowData: Concentrator) => rowData.location || "-",
         },
         {
-          title: "Area Name",
-          field: "Area Name",
-          render: (rowData: any) => rowData["Area Name"] || "-",
+          title: "IP",
+          field: "ipAddress",
+          render: (rowData: Concentrator) => rowData.ipAddress || "-",
         },
         {
-          title: "Installed Time",
-          field: "Installed Time",
-          type: "date",
-          render: (rowData: any) => rowData["Installed Time"] || "-",
+          title: "Última Comunicación",
+          field: "lastCommunication",
+          type: "datetime",
+          render: (rowData: Concentrator) => rowData.lastCommunication ? new Date(rowData.lastCommunication).toLocaleString() : "-",
         },
       ]}
       data={data}

src/pages/concentrators/useConcentrators.ts

@@ -3,6 +3,7 @@ import {
   fetchConcentrators,
   type Concentrator,
 } from "../../api/concentrators";
+import { fetchProjects, type Project } from "../../api/projects";
 import type { ProjectCard, SampleView } from "./ConcentratorsPage";
 
 type User = {
@@ -16,6 +17,7 @@ export function useConcentrators(currentUser: User) {
   const [loadingProjects, setLoadingProjects] = useState(true);
   const [loadingConcentrators, setLoadingConcentrators] = useState(true);
 
+  const [projects, setProjects] = useState<Project[]>([]);
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [selectedProject, setSelectedProject] = useState("");
 
@@ -51,58 +53,49 @@ export function useConcentrators(currentUser: User) {
     [allProjects, currentUser.role, currentUser.project]
   );
 
-  const loadConcentrators = async () => {
-    if (!isGeneral) return;
-
-    setLoadingConcentrators(true);
+  const loadProjects = async () => {
     setLoadingProjects(true);
-
     try {
-      const raw = await fetchConcentrators();
-
-      const normalized = raw.map((c: any) => {
-        const preferredName =
-          c["Device Alias"] ||
-          c["Device Label"] ||
-          c["Device Display Name"] ||
-          c.deviceName ||
-          c.name ||
-          c["Device Name"] ||
-          "";
-
-        return {
-          ...c,
-          "Device Name": preferredName,
-        };
-      });
-
-      const projectsArray = [
-        ...new Set(normalized.map((r: any) => r["Area Name"])),
-      ].filter(Boolean) as string[];
-
-      setAllProjects(projectsArray);
-      setConcentrators(normalized);
+      const projectsData = await fetchProjects();
+      setProjects(projectsData);
+      const projectIds = projectsData.map((p) => p.id);
+      setAllProjects(projectIds);
 
       setSelectedProject((prev) => {
         if (prev) return prev;
         if (currentUser.role !== "SUPER_ADMIN" && currentUser.project) {
           return currentUser.project;
         }
-        return projectsArray[0] ?? "";
+        return projectIds[0] ?? "";
       });
     } catch (err) {
-      console.error("Error loading concentrators:", err);
+      console.error("Error loading projects:", err);
+      setProjects([]);
       setAllProjects([]);
-      setConcentrators([]);
-      setSelectedProject("");
     } finally {
-      setLoadingConcentrators(false);
       setLoadingProjects(false);
     }
   };
 
-  // init
+  const loadConcentrators = async () => {
+    if (!isGeneral) return;
+
+    setLoadingConcentrators(true);
+
+    try {
+      const data = await fetchConcentrators();
+      setConcentrators(data);
+    } catch (err) {
+      console.error("Error loading concentrators:", err);
+      setConcentrators([]);
+    } finally {
+      setLoadingConcentrators(false);
+    }
+  };
+
+  // init - load projects and concentrators
   useEffect(() => {
+    loadProjects();
     loadConcentrators();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -110,6 +103,7 @@ export function useConcentrators(currentUser: User) {
   // view changes
   useEffect(() => {
     if (isGeneral) {
+      loadProjects();
       loadConcentrators();
     } else {
       setLoadingProjects(false);
@@ -136,7 +130,7 @@ export function useConcentrators(currentUser: User) {
 
     if (selectedProject) {
       setFilteredConcentrators(
-        concentrators.filter((c) => c["Area Name"] === selectedProject)
+        concentrators.filter((c) => c.projectId === selectedProject)
       );
     } else {
       setFilteredConcentrators(concentrators);
@@ -146,8 +140,13 @@ export function useConcentrators(currentUser: User) {
   // sidebar cards (general)
   const projectsDataGeneral: ProjectCard[] = useMemo(() => {
     const counts = concentrators.reduce<Record<string, number>>((acc, c) => {
-      const area = c["Area Name"] ?? "SIN PROYECTO";
-      acc[area] = (acc[area] ?? 0) + 1;
+      const project = c.projectId ?? "SIN PROYECTO";
+      acc[project] = (acc[project] ?? 0) + 1;
+      return acc;
+    }, {});
+
+    const projectNameMap = projects.reduce<Record<string, string>>((acc, p) => {
+      acc[p.id] = p.name;
       return acc;
     }, {});
 
@@ -155,17 +154,18 @@ export function useConcentrators(currentUser: User) {
     const baseContact = "Operaciones";
     const baseLastSync = "Hace 1 h";
 
-    return visibleProjects.map((name) => ({
-      name,
+    return visibleProjects.map((projectId) => ({
+      id: projectId,
+      name: projectNameMap[projectId] ?? projectId,
       region: baseRegion,
       projects: 1,
-      concentrators: counts[name] ?? 0,
+      concentrators: counts[projectId] ?? 0,
       activeAlerts: 0,
       lastSync: baseLastSync,
       contact: baseContact,
-      status: "ACTIVO",
+      status: "ACTIVO" as const,
     }));
-  }, [concentrators, visibleProjects]);
+  }, [concentrators, visibleProjects, projects]);
 
   // sidebar cards (mock)
   const projectsDataMock: Record<Exclude<SampleView, "GENERAL">, ProjectCard[]> =
@@ -173,6 +173,7 @@ export function useConcentrators(currentUser: User) {
       () => ({
         LORA: [
           {
+            id: "mock-lora-centro",
             name: "LoRa - Zona Centro",
             region: "Baja California",
             projects: 1,
@@ -183,6 +184,7 @@ export function useConcentrators(currentUser: User) {
             status: "ACTIVO",
           },
           {
+            id: "mock-lora-este",
             name: "LoRa - Zona Este",
             region: "Baja California",
             projects: 1,
@@ -195,6 +197,7 @@ export function useConcentrators(currentUser: User) {
         ],
         LORAWAN: [
           {
+            id: "mock-lorawan-industrial",
             name: "LoRaWAN - Industrial",
             region: "Baja California",
             projects: 1,
@@ -207,6 +210,7 @@ export function useConcentrators(currentUser: User) {
         ],
         GRANDES: [
           {
+            id: "mock-grandes-convenios",
             name: "Grandes - Convenios",
             region: "Baja California",
             projects: 1,

src/pages/consumption/ConsumptionPage.tsx

@@ -0,0 +1,560 @@
+import { useEffect, useState, useMemo } from "react";
+import {
+  RefreshCcw,
+  Download,
+  Search,
+  Droplets,
+  TrendingUp,
+  Zap,
+  Clock,
+  ChevronLeft,
+  ChevronRight,
+  Filter,
+  X,
+  Activity,
+} from "lucide-react";
+import {
+  fetchReadings,
+  fetchConsumptionSummary,
+  type MeterReading,
+  type ConsumptionSummary,
+  type Pagination,
+} from "../../api/readings";
+import { fetchProjects, type Project } from "../../api/projects";
+
+export default function ConsumptionPage() {
+  const [readings, setReadings] = useState<MeterReading[]>([]);
+  const [summary, setSummary] = useState<ConsumptionSummary | null>(null);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [pagination, setPagination] = useState<Pagination>({
+    page: 1,
+    pageSize: 100,
+    total: 0,
+    totalPages: 0,
+  });
+
+  const [loadingReadings, setLoadingReadings] = useState(false);
+  const [loadingSummary, setLoadingSummary] = useState(false);
+
+  const [selectedProject, setSelectedProject] = useState<string>("");
+  const [startDate, setStartDate] = useState<string>("");
+  const [endDate, setEndDate] = useState<string>("");
+  const [search, setSearch] = useState<string>("");
+  const [showFilters, setShowFilters] = useState(false);
+
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        const data = await fetchProjects();
+        setProjects(data);
+      } catch (error) {
+        console.error("Error loading projects:", error);
+      }
+    };
+    loadProjects();
+  }, []);
+
+  const loadData = async (page = 1) => {
+    setLoadingReadings(true);
+    setLoadingSummary(true);
+
+    try {
+      const [readingsResult, summaryResult] = await Promise.all([
+        fetchReadings({
+          projectId: selectedProject || undefined,
+          startDate: startDate || undefined,
+          endDate: endDate || undefined,
+          page,
+          pageSize: 100,
+        }),
+        fetchConsumptionSummary(selectedProject || undefined),
+      ]);
+
+      setReadings(readingsResult.data);
+      setPagination(readingsResult.pagination);
+      setSummary(summaryResult);
+    } catch (error) {
+      console.error("Error loading data:", error);
+    } finally {
+      setLoadingReadings(false);
+      setLoadingSummary(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData(1);
+  }, [selectedProject, startDate, endDate]);
+
+  const filteredReadings = useMemo(() => {
+    if (!search.trim()) return readings;
+    const q = search.toLowerCase();
+    return readings.filter(
+      (r) =>
+        (r.meterSerialNumber ?? "").toLowerCase().includes(q) ||
+        (r.meterName ?? "").toLowerCase().includes(q) ||
+        (r.areaName ?? "").toLowerCase().includes(q) ||
+        String(r.readingValue).includes(q)
+    );
+  }, [readings, search]);
+
+  const formatDate = (dateStr: string | null): string => {
+    if (!dateStr) return "—";
+    const date = new Date(dateStr);
+    return date.toLocaleString("es-MX", {
+      day: "2-digit",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const formatFullDate = (dateStr: string | null): string => {
+    if (!dateStr) return "Sin datos";
+    const date = new Date(dateStr);
+    return date.toLocaleString("es-MX", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const exportToCSV = () => {
+    const headers = ["Fecha", "Medidor", "Serial", "Área", "Valor", "Tipo", "Batería", "Señal"];
+    const rows = filteredReadings.map((r) => [
+      formatFullDate(r.receivedAt),
+      r.meterName || "—",
+      r.meterSerialNumber || "—",
+      r.areaName || "—",
+      r.readingValue.toFixed(2),
+      r.readingType || "—",
+      r.batteryLevel !== null ? `${r.batteryLevel}%` : "—",
+      r.signalStrength !== null ? `${r.signalStrength} dBm` : "—",
+    ]);
+    const csv = [headers, ...rows].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `consumo_${new Date().toISOString().split("T")[0]}.csv`;
+    link.click();
+  };
+
+  const clearFilters = () => {
+    setSelectedProject("");
+    setStartDate("");
+    setEndDate("");
+    setSearch("");
+  };
+
+  const hasFilters = selectedProject || startDate || endDate;
+  const activeFiltersCount = [selectedProject, startDate, endDate].filter(Boolean).length;
+
+  return (
+    <div className="min-h-full bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 p-6">
+      <div className="max-w-[1600px] mx-auto space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-800">Consumo de Agua</h1>
+            <p className="text-slate-500 text-sm mt-0.5">
+              Monitoreo en tiempo real de lecturas
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => loadData(pagination.page)}
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 hover:border-slate-300 transition-all shadow-sm"
+            >
+              <RefreshCcw size={16} />
+              Actualizar
+            </button>
+            <button
+              onClick={exportToCSV}
+              disabled={filteredReadings.length === 0}
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all shadow-sm shadow-blue-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Download size={16} />
+              Exportar
+            </button>
+          </div>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCard
+            icon={<Activity />}
+            label="Total Lecturas"
+            value={summary?.totalReadings.toLocaleString() ?? "0"}
+            trend="+12%"
+            loading={loadingSummary}
+            gradient="from-blue-500 to-blue-600"
+          />
+          <StatCard
+            icon={<Zap />}
+            label="Medidores Activos"
+            value={summary?.totalMeters.toLocaleString() ?? "0"}
+            loading={loadingSummary}
+            gradient="from-emerald-500 to-teal-600"
+          />
+          <StatCard
+            icon={<Droplets />}
+            label="Consumo Promedio"
+            value={`${summary?.avgReading.toFixed(1) ?? "0"} m³`}
+            loading={loadingSummary}
+            gradient="from-violet-500 to-purple-600"
+          />
+          <StatCard
+            icon={<Clock />}
+            label="Última Lectura"
+            value={summary?.lastReadingDate ? formatDate(summary.lastReadingDate) : "Sin datos"}
+            loading={loadingSummary}
+            gradient="from-amber-500 to-orange-600"
+          />
+        </div>
+
+        {/* Table Card */}
+        <div className="bg-white rounded-2xl shadow-sm shadow-slate-200/50 border border-slate-200/60 overflow-hidden">
+          {/* Table Header */}
+          <div className="px-5 py-4 border-b border-slate-100 flex flex-wrap items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <Search
+                  size={18}
+                  className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+                />
+                <input
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Buscar lecturas..."
+                  className="w-64 pl-10 pr-4 py-2 text-sm bg-slate-50 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:bg-white transition-all"
+                />
+              </div>
+
+              <button
+                onClick={() => setShowFilters(!showFilters)}
+                className={`inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-xl transition-all ${
+                  showFilters || hasFilters
+                    ? "bg-blue-50 text-blue-600 border border-blue-200"
+                    : "text-slate-600 bg-slate-50 hover:bg-slate-100"
+                }`}
+              >
+                <Filter size={16} />
+                Filtros
+                {activeFiltersCount > 0 && (
+                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-blue-600 rounded-full">
+                    {activeFiltersCount}
+                  </span>
+                )}
+              </button>
+
+              {hasFilters && (
+                <button
+                  onClick={clearFilters}
+                  className="inline-flex items-center gap-1 px-2 py-1 text-xs text-slate-500 hover:text-slate-700"
+                >
+                  <X size={14} />
+                  Limpiar
+                </button>
+              )}
+            </div>
+
+            <div className="flex items-center gap-4 text-sm text-slate-500">
+              <span>
+                <span className="font-semibold text-slate-700">{filteredReadings.length}</span>{" "}
+                {pagination.total > filteredReadings.length && `de ${pagination.total} `}
+                lecturas
+              </span>
+
+              {pagination.totalPages > 1 && (
+                <div className="flex items-center gap-1 bg-slate-50 rounded-lg p-1">
+                  <button
+                    onClick={() => loadData(pagination.page - 1)}
+                    disabled={pagination.page === 1}
+                    className="p-1.5 rounded-md hover:bg-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                  >
+                    <ChevronLeft size={16} />
+                  </button>
+                  <span className="px-2 text-xs font-medium">
+                    {pagination.page} / {pagination.totalPages}
+                  </span>
+                  <button
+                    onClick={() => loadData(pagination.page + 1)}
+                    disabled={pagination.page === pagination.totalPages}
+                    className="p-1.5 rounded-md hover:bg-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                  >
+                    <ChevronRight size={16} />
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Filters Panel */}
+          {showFilters && (
+            <div className="px-5 py-4 bg-slate-50/50 border-b border-slate-100 flex flex-wrap items-center gap-4">
+              <div className="flex items-center gap-2">
+                <label className="text-xs font-medium text-slate-500 uppercase tracking-wide">
+                  Proyecto
+                </label>
+                <select
+                  value={selectedProject}
+                  onChange={(e) => setSelectedProject(e.target.value)}
+                  className="px-3 py-1.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                >
+                  <option value="">Todos</option>
+                  {projects.map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <label className="text-xs font-medium text-slate-500 uppercase tracking-wide">
+                  Desde
+                </label>
+                <input
+                  type="date"
+                  value={startDate}
+                  onChange={(e) => setStartDate(e.target.value)}
+                  className="px-3 py-1.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                />
+              </div>
+
+              <div className="flex items-center gap-2">
+                <label className="text-xs font-medium text-slate-500 uppercase tracking-wide">
+                  Hasta
+                </label>
+                <input
+                  type="date"
+                  value={endDate}
+                  onChange={(e) => setEndDate(e.target.value)}
+                  className="px-3 py-1.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Table */}
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-slate-50/80">
+                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Fecha
+                  </th>
+                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Medidor
+                  </th>
+                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Serial
+                  </th>
+                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Área
+                  </th>
+                  <th className="px-5 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Consumo
+                  </th>
+                  <th className="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Tipo
+                  </th>
+                  <th className="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Estado
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {loadingReadings ? (
+                  Array.from({ length: 8 }).map((_, i) => (
+                    <tr key={i}>
+                      {Array.from({ length: 7 }).map((_, j) => (
+                        <td key={j} className="px-5 py-4">
+                          <div className="h-4 bg-slate-100 rounded-md animate-pulse" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : filteredReadings.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="px-5 py-16 text-center">
+                      <div className="flex flex-col items-center">
+                        <div className="w-16 h-16 bg-slate-100 rounded-2xl flex items-center justify-center mb-4">
+                          <Droplets size={32} className="text-slate-400" />
+                        </div>
+                        <p className="text-slate-600 font-medium">No hay lecturas disponibles</p>
+                        <p className="text-slate-400 text-sm mt-1">
+                          {hasFilters
+                            ? "Intenta ajustar los filtros de búsqueda"
+                            : "Las lecturas aparecerán aquí cuando se reciban datos"}
+                        </p>
+                      </div>
+                    </td>
+                  </tr>
+                ) : (
+                  filteredReadings.map((reading, idx) => (
+                    <tr
+                      key={reading.id}
+                      className={`group hover:bg-blue-50/40 transition-colors ${
+                        idx % 2 === 0 ? "bg-white" : "bg-slate-50/30"
+                      }`}
+                    >
+                      <td className="px-5 py-3.5">
+                        <span className="text-sm text-slate-600">{formatDate(reading.receivedAt)}</span>
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <span className="text-sm font-medium text-slate-800">
+                          {reading.meterName || "—"}
+                        </span>
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <code className="text-xs text-slate-500 bg-slate-100 px-2 py-0.5 rounded">
+                          {reading.meterSerialNumber || "—"}
+                        </code>
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <span className="text-sm text-slate-600">{reading.areaName || "—"}</span>
+                      </td>
+                      <td className="px-5 py-3.5 text-right">
+                        <span className="text-sm font-semibold text-slate-800 tabular-nums">
+                          {reading.readingValue.toFixed(2)}
+                        </span>
+                        <span className="text-xs text-slate-400 ml-1">m³</span>
+                      </td>
+                      <td className="px-5 py-3.5 text-center">
+                        <TypeBadge type={reading.readingType} />
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <div className="flex items-center justify-center gap-2">
+                          <BatteryIndicator level={reading.batteryLevel} />
+                          <SignalIndicator strength={reading.signalStrength} />
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  icon,
+  label,
+  value,
+  trend,
+  loading,
+  gradient,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  trend?: string;
+  loading?: boolean;
+  gradient: string;
+}) {
+  return (
+    <div className="relative bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/50 border border-slate-200/60 overflow-hidden group hover:shadow-md hover:shadow-slate-200/50 transition-all">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-slate-500">{label}</p>
+          {loading ? (
+            <div className="h-8 w-24 bg-slate-100 rounded-lg animate-pulse" />
+          ) : (
+            <p className="text-2xl font-bold text-slate-800">{value}</p>
+          )}
+          {trend && !loading && (
+            <div className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">
+              <TrendingUp size={12} />
+              {trend}
+            </div>
+          )}
+        </div>
+        <div
+          className={`w-12 h-12 rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform`}
+        >
+          {icon}
+        </div>
+      </div>
+      <div
+        className={`absolute -right-8 -bottom-8 w-32 h-32 rounded-full bg-gradient-to-br ${gradient} opacity-5`}
+      />
+    </div>
+  );
+}
+
+function TypeBadge({ type }: { type: string | null }) {
+  if (!type) return <span className="text-slate-400">—</span>;
+
+  const styles: Record<string, { bg: string; text: string; dot: string }> = {
+    AUTOMATIC: { bg: "bg-emerald-50", text: "text-emerald-700", dot: "bg-emerald-500" },
+    MANUAL: { bg: "bg-blue-50", text: "text-blue-700", dot: "bg-blue-500" },
+    SCHEDULED: { bg: "bg-violet-50", text: "text-violet-700", dot: "bg-violet-500" },
+  };
+
+  const style = styles[type] || { bg: "bg-slate-50", text: "text-slate-700", dot: "bg-slate-500" };
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full ${style.bg} ${style.text}`}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full ${style.dot}`} />
+      {type}
+    </span>
+  );
+}
+
+function BatteryIndicator({ level }: { level: number | null }) {
+  if (level === null) return null;
+
+  const getColor = () => {
+    if (level > 50) return "bg-emerald-500";
+    if (level > 20) return "bg-amber-500";
+    return "bg-red-500";
+  };
+
+  return (
+    <div className="flex items-center gap-1" title={`Batería: ${level}%`}>
+      <div className="w-6 h-3 border border-slate-300 rounded-sm relative overflow-hidden">
+        <div
+          className={`absolute left-0 top-0 bottom-0 ${getColor()} transition-all`}
+          style={{ width: `${level}%` }}
+        />
+      </div>
+      <span className="text-[10px] text-slate-500 font-medium">{level}%</span>
+    </div>
+  );
+}
+
+function SignalIndicator({ strength }: { strength: number | null }) {
+  if (strength === null) return null;
+
+  const getBars = () => {
+    if (strength >= -70) return 4;
+    if (strength >= -85) return 3;
+    if (strength >= -100) return 2;
+    return 1;
+  };
+
+  const bars = getBars();
+
+  return (
+    <div className="flex items-end gap-0.5 h-3" title={`Señal: ${strength} dBm`}>
+      {[1, 2, 3, 4].map((i) => (
+        <div
+          key={i}
+          className={`w-1 rounded-sm transition-colors ${
+            i <= bars ? "bg-emerald-500" : "bg-slate-200"
+          }`}
+          style={{ height: `${i * 2 + 4}px` }}
+        />
+      ))}
+    </div>
+  );
+}

src/pages/meters/MeterPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
-import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
-import type { Meter } from "../../api/meters";
+import { Plus, Trash2, Pencil, RefreshCcw, Upload } from "lucide-react";
+import type { Meter, MeterInput } from "../../api/meters";
 import { createMeter, deleteMeter, updateMeter } from "../../api/meters";
 import ConfirmModal from "../../components/layout/common/ConfirmModal";
 
@@ -8,16 +8,9 @@ import { useMeters } from "./useMeters";
 import MetersSidebar from "./MetersSidebar";
 import MetersTable from "./MetersTable";
 import MetersModal from "./MetersModal";
+import MetersBulkUploadModal from "./MetersBulkUploadModal";
 
-/* ================= TYPES (exportables para otros componentes) ================= */
-
-export interface DeviceData {
-  "Device ID": number;
-  "Device EUI": string;
-  "Join EUI": string;
-  AppKey: string;
-  meterId?: string;
-}
+/* ================= TYPES ================= */
 
 export type ProjectStatus = "ACTIVO" | "INACTIVO";
 
@@ -34,20 +27,6 @@ export type ProjectCard = {
 
 export type TakeType = "GENERAL" | "LORA" | "LORAWAN" | "GRANDES";
 
-/* ================= MOCKS (sin backend) ================= */
-
-const MOCK_PROJECTS_BY_TYPE: Record<
-  Exclude<TakeType, "GENERAL">,
-  Array<{ name: string; meters?: number }>
-> = {
-  LORA: [
-    { name: "LoRa - Demo 01", meters: 12 },
-    { name: "LoRa - Demo 02", meters: 7 },
-  ],
-  LORAWAN: [{ name: "LoRaWAN - Demo 01", meters: 4 }],
-  GRANDES: [{ name: "Grandes - Demo 01", meters: 2 }],
-};
-
 /* ================= COMPONENT ================= */
 
 export default function MetersPage({
@@ -68,46 +47,27 @@ export default function MetersPage({
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
-  const emptyMeter: Omit<Meter, "id"> = useMemo(
+  const [showBulkUpload, setShowBulkUpload] = useState(false);
+
+  // Form state for creating/editing meters
+  const emptyForm: MeterInput = useMemo(
     () => ({
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      areaName: "",
-      accountNumber: null,
-      userName: null,
-      userAddress: null,
-      meterSerialNumber: "",
-      meterName: "",
-      meterStatus: "Installed",
-      protocolType: "",
-      priceNo: null,
-      priceName: null,
-      dmaPartition: null,
-      supplyTypes: "",
-      deviceId: "",
-      deviceName: "",
-      deviceType: "",
-      usageAnalysisType: "",
-      installedTime: new Date().toISOString(),
+      serialNumber: "",
+      meterId: "",
+      name: "",
+      concentratorId: "",
+      location: "",
+      type: "LORA",
+      status: "ACTIVE",
+      installationDate: new Date().toISOString(),
     }),
     []
   );
 
-  const emptyDeviceData: DeviceData = useMemo(
-    () => ({
-      "Device ID": 0,
-      "Device EUI": "",
-      "Join EUI": "",
-      AppKey: "",
-    }),
-    []
-  );
-
-  const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
-  const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
+  const [form, setForm] = useState<MeterInput>(emptyForm);
   const [errors, setErrors] = useState<Record<string, boolean>>({});
 
-  // Projects cards (real)
+  // Projects cards (from real data)
   const projectsDataReal: ProjectCard[] = useMemo(() => {
     const baseRegion = "Baja California";
     const baseContact = "Operaciones";
@@ -121,32 +81,13 @@ export default function MetersPage({
       activeAlerts: 0,
       lastSync: baseLastSync,
       contact: baseContact,
-      status: "ACTIVO",
+      status: "ACTIVO" as ProjectStatus,
     }));
   }, [m.allProjects, m.projectsCounts]);
 
-  // Projects cards (mock)
-  const projectsDataMock: ProjectCard[] = useMemo(() => {
-    const baseRegion = "Baja California";
-    const baseContact = "Operaciones";
-    const baseLastSync = "Hace 1 h";
+  const sidebarProjects = isMockMode ? [] : projectsDataReal;
 
-    const mocks = MOCK_PROJECTS_BY_TYPE[takeType as Exclude<TakeType, "GENERAL">] ?? [];
-    return mocks.map((x) => ({
-      name: x.name,
-      region: baseRegion,
-      projects: 1,
-      meters: x.meters ?? 0,
-      activeAlerts: 0,
-      lastSync: baseLastSync,
-      contact: baseContact,
-      status: "ACTIVO",
-    }));
-  }, [takeType]);
-
-  const sidebarProjects = isMockMode ? projectsDataMock : projectsDataReal;
-
-  // Search filtered
+  // Search filtered meters
   const searchFiltered = useMemo(() => {
     if (isMockMode) return [];
     const q = search.trim().toLowerCase();
@@ -154,76 +95,43 @@ export default function MetersPage({
 
     return m.filteredMeters.filter((x) => {
       return (
-        (x.meterName ?? "").toLowerCase().includes(q) ||
-        (x.meterSerialNumber ?? "").toLowerCase().includes(q) ||
-        (x.deviceId ?? "").toLowerCase().includes(q) ||
-        (x.areaName ?? "").toLowerCase().includes(q)
+        (x.name ?? "").toLowerCase().includes(q) ||
+        (x.serialNumber ?? "").toLowerCase().includes(q) ||
+        (x.location ?? "").toLowerCase().includes(q) ||
+        (x.concentratorName ?? "").toLowerCase().includes(q)
       );
     });
   }, [isMockMode, search, m.filteredMeters]);
 
-  // Device config mock
-  const createOrUpdateDevice = async (deviceData: DeviceData): Promise<void> => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        console.log("Device data that would be sent to API:", deviceData);
-        resolve();
-      }, 500);
-    });
-  };
-
   // Validation
   const validateForm = (): boolean => {
     const next: Record<string, boolean> = {};
 
-    if (!form.meterName.trim()) next["meterName"] = true;
-    if (!form.meterSerialNumber.trim()) next["meterSerialNumber"] = true;
-    if (!form.areaName.trim()) next["areaName"] = true;
-    if (!form.deviceName.trim()) next["deviceName"] = true;
-    if (!form.protocolType.trim()) next["protocolType"] = true;
-
-    if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) next["Device ID"] = true;
-    if (!deviceForm["Device EUI"].trim()) next["Device EUI"] = true;
-    if (!deviceForm["Join EUI"].trim()) next["Join EUI"] = true;
-    if (!deviceForm["AppKey"].trim()) next["AppKey"] = true;
+    if (!form.name.trim()) next["name"] = true;
+    if (!form.serialNumber.trim()) next["serialNumber"] = true;
+    if (!form.concentratorId.trim()) next["concentratorId"] = true;
 
     setErrors(next);
     return Object.keys(next).length === 0;
   };
 
-  // CRUD
+  // CRUD handlers
   const handleSave = async () => {
     if (isMockMode) return;
     if (!validateForm()) return;
 
     try {
-      let savedMeter: Meter;
-
       if (editingId) {
-        const meterToUpdate = m.meters.find((x) => x.id === editingId);
-        if (!meterToUpdate) throw new Error("Meter to update not found");
-
         const updatedMeter = await updateMeter(editingId, form);
         m.setMeters((prev) => prev.map((x) => (x.id === editingId ? updatedMeter : x)));
-        savedMeter = updatedMeter;
       } else {
         const newMeter = await createMeter(form);
         m.setMeters((prev) => [...prev, newMeter]);
-        savedMeter = newMeter;
-      }
-
-      try {
-        const deviceDataWithRef = { ...deviceForm, meterId: savedMeter.id };
-        await createOrUpdateDevice(deviceDataWithRef);
-      } catch (deviceError) {
-        console.error("Error saving device data:", deviceError);
-        alert("Meter saved, but there was an error saving device data.");
       }
 
       setShowModal(false);
       setEditingId(null);
-      setForm(emptyMeter);
-      setDeviceForm(emptyDeviceData);
+      setForm(emptyForm);
       setErrors({});
       setActiveMeter(null);
     } catch (error) {
@@ -260,6 +168,33 @@ export default function MetersPage({
     setSearch("");
   };
 
+  const openEditModal = () => {
+    if (isMockMode || !activeMeter) return;
+
+    setEditingId(activeMeter.id);
+    setForm({
+      serialNumber: activeMeter.serialNumber,
+      meterId: activeMeter.meterId ?? "",
+      name: activeMeter.name,
+      concentratorId: activeMeter.concentratorId,
+      location: activeMeter.location ?? "",
+      type: activeMeter.type,
+      status: activeMeter.status,
+      installationDate: activeMeter.installationDate ?? "",
+    });
+    setErrors({});
+    setShowModal(true);
+  };
+
+  const openCreateModal = () => {
+    if (isMockMode) return;
+
+    setForm(emptyForm);
+    setErrors({});
+    setEditingId(null);
+    setShowModal(true);
+  };
+
   return (
     <div className="flex gap-6 p-6 w-full bg-gray-100">
       {/* SIDEBAR */}
@@ -296,55 +231,23 @@ export default function MetersPage({
 
           <div className="flex gap-3">
             <button
-              onClick={() => {
-                if (isMockMode) return;
-
-                const base = { ...emptyMeter };
-                if (m.selectedProject) base.areaName = m.selectedProject;
-
-                setForm(base);
-                setDeviceForm(emptyDeviceData);
-                setErrors({});
-                setEditingId(null);
-                setShowModal(true);
-              }}
-              disabled={isMockMode || !m.selectedProject || m.allProjects.length === 0}
+              onClick={openCreateModal}
+              disabled={isMockMode || m.allProjects.length === 0}
               className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <Plus size={16} /> Agregar
             </button>
 
             <button
-              onClick={() => {
-                if (isMockMode) return;
-                if (!activeMeter) return;
+              onClick={() => setShowBulkUpload(true)}
+              disabled={isMockMode}
+              className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-green-600"
+            >
+              <Upload size={16} /> Carga Masiva
+            </button>
 
-                setEditingId(activeMeter.id);
-                setForm({
-                  createdAt: activeMeter.createdAt,
-                  updatedAt: activeMeter.updatedAt,
-                  areaName: activeMeter.areaName,
-                  accountNumber: activeMeter.accountNumber,
-                  userName: activeMeter.userName,
-                  userAddress: activeMeter.userAddress,
-                  meterSerialNumber: activeMeter.meterSerialNumber,
-                  meterName: activeMeter.meterName,
-                  meterStatus: activeMeter.meterStatus,
-                  protocolType: activeMeter.protocolType,
-                  priceNo: activeMeter.priceNo,
-                  priceName: activeMeter.priceName,
-                  dmaPartition: activeMeter.dmaPartition,
-                  supplyTypes: activeMeter.supplyTypes,
-                  deviceId: activeMeter.deviceId,
-                  deviceName: activeMeter.deviceName,
-                  deviceType: activeMeter.deviceType,
-                  usageAnalysisType: activeMeter.usageAnalysisType,
-                  installedTime: activeMeter.installedTime,
-                });
-                setDeviceForm(emptyDeviceData);
-                setErrors({});
-                setShowModal(true);
-              }}
+            <button
+              onClick={openEditModal}
               disabled={isMockMode || !activeMeter}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
@@ -373,7 +276,7 @@ export default function MetersPage({
 
         <input
           className="bg-white rounded-lg shadow px-4 py-2 text-sm"
-          placeholder="Search by meter name, serial number, device ID, area, device type, or meter status..."
+          placeholder="Buscar por nombre, serial, ubicación o concentrador..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           disabled={isMockMode || !m.selectedProject}
@@ -392,8 +295,8 @@ export default function MetersPage({
           open={confirmOpen}
           title="Eliminar medidor"
           message={`¿Estás seguro que quieres eliminar "${
-            activeMeter?.meterName ?? "este medidor"
-          }" (${activeMeter?.meterSerialNumber ?? "—"})? Esta acción no se puede deshacer.`}
+            activeMeter?.name ?? "este medidor"
+          }" (${activeMeter?.serialNumber ?? "—"})? Esta acción no se puede deshacer.`}
           confirmText="Eliminar"
           cancelText="Cancelar"
           danger
@@ -416,18 +319,25 @@ export default function MetersPage({
           editingId={editingId}
           form={form}
           setForm={setForm}
-          deviceForm={deviceForm}
-          setDeviceForm={setDeviceForm}
           errors={errors}
           setErrors={setErrors}
           onClose={() => {
             setShowModal(false);
-            setDeviceForm(emptyDeviceData);
             setErrors({});
           }}
           onSave={handleSave}
         />
       )}
+
+      {showBulkUpload && (
+        <MetersBulkUploadModal
+          onClose={() => setShowBulkUpload(false)}
+          onSuccess={() => {
+            m.loadMeters();
+            setShowBulkUpload(false);
+          }}
+        />
+      )}
     </div>
   );
 }

src/pages/meters/MetersBulkUploadModal.tsx

@@ -0,0 +1,210 @@
+import { useState, useRef } from "react";
+import { Upload, Download, X, AlertCircle, CheckCircle } from "lucide-react";
+import { bulkUploadMeters, downloadMeterTemplate, type BulkUploadResult } from "../../api/meters";
+
+type Props = {
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+export default function MetersBulkUploadModal({ onClose, onSuccess }: Props) {
+  const [file, setFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [result, setResult] = useState<BulkUploadResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      // Validate file type
+      const validTypes = [
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "application/vnd.ms-excel",
+      ];
+      if (!validTypes.includes(selectedFile.type)) {
+        setError("Solo se permiten archivos Excel (.xlsx, .xls)");
+        return;
+      }
+      setFile(selectedFile);
+      setError(null);
+      setResult(null);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!file) return;
+
+    setUploading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const uploadResult = await bulkUploadMeters(file);
+      setResult(uploadResult);
+
+      if (uploadResult.data.inserted > 0) {
+        onSuccess();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Error en la carga");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDownloadTemplate = async () => {
+    try {
+      await downloadMeterTemplate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Error descargando plantilla");
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-[600px] max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold">Carga Masiva de Medidores</h2>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Instructions */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+          <h3 className="font-medium text-blue-800 mb-2">Instrucciones:</h3>
+          <ol className="text-sm text-blue-700 space-y-1 list-decimal list-inside">
+            <li>Descarga la plantilla Excel con el formato correcto</li>
+            <li>Llena los datos de los medidores (serial_number, name y concentrator_serial son obligatorios)</li>
+            <li>El concentrator_serial debe coincidir con un concentrador existente</li>
+            <li>Sube el archivo Excel completado</li>
+          </ol>
+        </div>
+
+        {/* Download Template Button */}
+        <button
+          onClick={handleDownloadTemplate}
+          className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 mb-4"
+        >
+          <Download size={16} />
+          Descargar Plantilla Excel
+        </button>
+
+        {/* File Input */}
+        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 mb-4 text-center">
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept=".xlsx,.xls"
+            className="hidden"
+          />
+
+          {file ? (
+            <div className="flex items-center justify-center gap-2">
+              <CheckCircle className="text-green-500" size={20} />
+              <span className="text-gray-700">{file.name}</span>
+              <button
+                onClick={() => {
+                  setFile(null);
+                  setResult(null);
+                  if (fileInputRef.current) fileInputRef.current.value = "";
+                }}
+                className="text-red-500 hover:text-red-700 ml-2"
+              >
+                <X size={16} />
+              </button>
+            </div>
+          ) : (
+            <div>
+              <Upload className="mx-auto text-gray-400 mb-2" size={32} />
+              <p className="text-gray-600 mb-2">
+                Arrastra un archivo Excel aquí o
+              </p>
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                className="text-blue-600 hover:text-blue-800 font-medium"
+              >
+                selecciona un archivo
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4 flex items-start gap-2">
+            <AlertCircle className="text-red-500 shrink-0" size={20} />
+            <p className="text-red-700 text-sm">{error}</p>
+          </div>
+        )}
+
+        {/* Upload Result */}
+        {result && (
+          <div
+            className={`border rounded-lg p-4 mb-4 ${
+              result.success
+                ? "bg-green-50 border-green-200"
+                : "bg-yellow-50 border-yellow-200"
+            }`}
+          >
+            <h4 className="font-medium mb-2">
+              {result.success ? "Carga completada" : "Carga completada con errores"}
+            </h4>
+            <div className="text-sm space-y-1">
+              <p>Total de filas: {result.data.totalRows}</p>
+              <p className="text-green-600">Insertados: {result.data.inserted}</p>
+              {result.data.failed > 0 && (
+                <p className="text-red-600">Fallidos: {result.data.failed}</p>
+              )}
+            </div>
+
+            {/* Error Details */}
+            {result.data.errors.length > 0 && (
+              <div className="mt-3">
+                <h5 className="font-medium text-sm mb-2">Errores:</h5>
+                <div className="max-h-40 overflow-y-auto bg-white rounded border p-2">
+                  {result.data.errors.map((err, idx) => (
+                    <div key={idx} className="text-xs text-red-600 py-1 border-b last:border-0">
+                      Fila {err.row}: {err.error}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-3 border-t">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 rounded hover:bg-gray-100"
+          >
+            {result ? "Cerrar" : "Cancelar"}
+          </button>
+          {!result && (
+            <button
+              onClick={handleUpload}
+              disabled={!file || uploading}
+              className="flex items-center gap-2 bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e] disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {uploading ? (
+                <>
+                  <span className="animate-spin">⏳</span>
+                  Cargando...
+                </>
+              ) : (
+                <>
+                  <Upload size={16} />
+                  Cargar Medidores
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/meters/MetersModal.tsx

@@ -1,15 +1,13 @@
 import type React from "react";
-import type { Meter } from "../../api/meters";
-import type { DeviceData } from "./MeterPage";
+import { useEffect, useState } from "react";
+import type { MeterInput } from "../../api/meters";
+import { fetchConcentrators, type Concentrator } from "../../api/concentrators";
 
 type Props = {
   editingId: string | null;
 
-  form: Omit<Meter, "id">;
-  setForm: React.Dispatch<React.SetStateAction<Omit<Meter, "id">>>;
-
-  deviceForm: DeviceData;
-  setDeviceForm: React.Dispatch<React.SetStateAction<DeviceData>>;
+  form: MeterInput;
+  setForm: React.Dispatch<React.SetStateAction<MeterInput>>;
 
   errors: Record<string, boolean>;
   setErrors: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
@@ -22,245 +20,183 @@ export default function MetersModal({
   editingId,
   form,
   setForm,
-  deviceForm,
-  setDeviceForm,
   errors,
   setErrors,
   onClose,
   onSave,
 }: Props) {
-  const title = editingId ? "Edit Meter" : "Add Meter";
+  const title = editingId ? "Editar Medidor" : "Agregar Medidor";
+  const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
+  const [loadingConcentrators, setLoadingConcentrators] = useState(true);
+
+  // Load concentrators for the dropdown
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await fetchConcentrators();
+        setConcentrators(data);
+      } catch (error) {
+        console.error("Error loading concentrators:", error);
+      } finally {
+        setLoadingConcentrators(false);
+      }
+    };
+    load();
+  }, []);
 
   return (
     <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 w-[700px] max-h-[90vh] overflow-y-auto space-y-4">
+      <div className="bg-white rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
         <h2 className="text-lg font-semibold">{title}</h2>
 
         {/* FORM */}
         <div className="space-y-3">
           <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
-            Meter Information
+            Información del Medidor
           </h3>
 
           <div className="grid grid-cols-2 gap-3">
             <div>
+              <label className="block text-sm text-gray-600 mb-1">Serial *</label>
               <input
                 className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["areaName"] ? "border-red-500" : ""
+                  errors["serialNumber"] ? "border-red-500" : ""
                 }`}
-                placeholder="Area Name *"
-                value={form.areaName}
+                placeholder="Número de serie"
+                value={form.serialNumber}
                 onChange={(e) => {
-                  setForm({ ...form, areaName: e.target.value });
-                  if (errors["areaName"]) setErrors({ ...errors, areaName: false });
+                  setForm({ ...form, serialNumber: e.target.value });
+                  if (errors["serialNumber"]) setErrors({ ...errors, serialNumber: false });
                 }}
                 required
               />
-              {errors["areaName"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
-            </div>
-
-            <div>
-              <input
-                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Account Number (optional)"
-                value={form.accountNumber ?? ""}
-                onChange={(e) =>
-                  setForm({ ...form, accountNumber: e.target.value || null })
-                }
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <input
-                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="User Name (optional)"
-                value={form.userName ?? ""}
-                onChange={(e) =>
-                  setForm({ ...form, userName: e.target.value || null })
-                }
-              />
-            </div>
-
-            <div>
-              <input
-                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="User Address (optional)"
-                value={form.userAddress ?? ""}
-                onChange={(e) =>
-                  setForm({ ...form, userAddress: e.target.value || null })
-                }
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["meterSerialNumber"] ? "border-red-500" : ""
-                }`}
-                placeholder="Meter S/N *"
-                value={form.meterSerialNumber}
-                onChange={(e) => {
-                  setForm({ ...form, meterSerialNumber: e.target.value });
-                  if (errors["meterSerialNumber"])
-                    setErrors({ ...errors, meterSerialNumber: false });
-                }}
-                required
-              />
-              {errors["meterSerialNumber"] && (
-                <p className="text-red-500 text-xs mt-1">This field is required</p>
+              {errors["serialNumber"] && (
+                <p className="text-red-500 text-xs mt-1">Campo requerido</p>
               )}
             </div>
 
             <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["meterName"] ? "border-red-500" : ""
-                }`}
-                placeholder="Meter Name *"
-                value={form.meterName}
-                onChange={(e) => {
-                  setForm({ ...form, meterName: e.target.value });
-                  if (errors["meterName"]) setErrors({ ...errors, meterName: false });
-                }}
-                required
-              />
-              {errors["meterName"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["protocolType"] ? "border-red-500" : ""
-                }`}
-                placeholder="Protocol Type *"
-                value={form.protocolType}
-                onChange={(e) => {
-                  setForm({ ...form, protocolType: e.target.value });
-                  if (errors["protocolType"]) setErrors({ ...errors, protocolType: false });
-                }}
-                required
-              />
-              {errors["protocolType"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
-            </div>
-
-            <div>
+              <label className="block text-sm text-gray-600 mb-1">Meter ID</label>
               <input
                 className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Device ID (optional)"
-                value={form.deviceId ?? ""}
-                onChange={(e) => setForm({ ...form, deviceId: e.target.value || "" })}
+                placeholder="ID del medidor (opcional)"
+                value={form.meterId ?? ""}
+                onChange={(e) => setForm({ ...form, meterId: e.target.value || undefined })}
               />
             </div>
           </div>
 
           <div>
+            <label className="block text-sm text-gray-600 mb-1">Nombre *</label>
             <input
               className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["deviceName"] ? "border-red-500" : ""
+                errors["name"] ? "border-red-500" : ""
               }`}
-              placeholder="Device Name *"
-              value={form.deviceName}
+              placeholder="Nombre del medidor"
+              value={form.name}
               onChange={(e) => {
-                setForm({ ...form, deviceName: e.target.value });
-                if (errors["deviceName"]) setErrors({ ...errors, deviceName: false });
+                setForm({ ...form, name: e.target.value });
+                if (errors["name"]) setErrors({ ...errors, name: false });
               }}
               required
             />
-            {errors["deviceName"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
+            {errors["name"] && <p className="text-red-500 text-xs mt-1">Campo requerido</p>}
           </div>
-        </div>
 
-        {/* DEVICE CONFIG */}
-        <div className="space-y-3 pt-4">
-          <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
-            Device Configuration
-          </h3>
+          <div>
+            <label className="block text-sm text-gray-600 mb-1">Concentrador *</label>
+            <select
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["concentratorId"] ? "border-red-500" : ""
+              }`}
+              value={form.concentratorId}
+              onChange={(e) => {
+                setForm({ ...form, concentratorId: e.target.value });
+                if (errors["concentratorId"]) setErrors({ ...errors, concentratorId: false });
+              }}
+              disabled={loadingConcentrators}
+              required
+            >
+              <option value="">
+                {loadingConcentrators ? "Cargando..." : "Selecciona un concentrador"}
+              </option>
+              {concentrators.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name} ({c.serialNumber})
+                </option>
+              ))}
+            </select>
+            {errors["concentratorId"] && (
+              <p className="text-red-500 text-xs mt-1">Selecciona un concentrador</p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm text-gray-600 mb-1">Ubicación</label>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Ubicación del medidor (opcional)"
+              value={form.location ?? ""}
+              onChange={(e) => setForm({ ...form, location: e.target.value || undefined })}
+            />
+          </div>
 
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <input
-                type="number"
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Device ID"] ? "border-red-500" : ""
-                }`}
-                placeholder="Device ID *"
-                value={deviceForm["Device ID"] || ""}
-                onChange={(e) => {
-                  setDeviceForm({ ...deviceForm, "Device ID": parseInt(e.target.value) || 0 });
-                  if (errors["Device ID"]) setErrors({ ...errors, "Device ID": false });
-                }}
-                required
-                min={1}
-              />
-              {errors["Device ID"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
+              <label className="block text-sm text-gray-600 mb-1">Tipo</label>
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={form.type ?? "LORA"}
+                onChange={(e) => setForm({ ...form, type: e.target.value })}
+              >
+                <option value="LORA">LoRa</option>
+                <option value="LORAWAN">LoRaWAN</option>
+                <option value="GRANDES">Grandes Consumidores</option>
+              </select>
             </div>
 
             <div>
-              <input
-                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  errors["Device EUI"] ? "border-red-500" : ""
-                }`}
-                placeholder="Device EUI *"
-                value={deviceForm["Device EUI"]}
-                onChange={(e) => {
-                  setDeviceForm({ ...deviceForm, "Device EUI": e.target.value });
-                  if (errors["Device EUI"]) setErrors({ ...errors, "Device EUI": false });
-                }}
-                required
-              />
-              {errors["Device EUI"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
+              <label className="block text-sm text-gray-600 mb-1">Estado</label>
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={form.status ?? "ACTIVE"}
+                onChange={(e) => setForm({ ...form, status: e.target.value })}
+              >
+                <option value="ACTIVE">Activo</option>
+                <option value="INACTIVE">Inactivo</option>
+                <option value="MAINTENANCE">Mantenimiento</option>
+                <option value="FAULTY">Averiado</option>
+                <option value="REPLACED">Reemplazado</option>
+              </select>
             </div>
           </div>
 
           <div>
+            <label className="block text-sm text-gray-600 mb-1">Fecha de Instalación</label>
             <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["Join EUI"] ? "border-red-500" : ""
-              }`}
-              placeholder="Join EUI *"
-              value={deviceForm["Join EUI"]}
-              onChange={(e) => {
-                setDeviceForm({ ...deviceForm, "Join EUI": e.target.value });
-                if (errors["Join EUI"]) setErrors({ ...errors, "Join EUI": false });
-              }}
-              required
+              type="date"
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              value={form.installationDate?.split("T")[0] ?? ""}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  installationDate: e.target.value ? new Date(e.target.value).toISOString() : undefined,
+                })
+              }
             />
-            {errors["Join EUI"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
-          </div>
-
-          <div>
-            <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["AppKey"] ? "border-red-500" : ""
-              }`}
-              placeholder="AppKey *"
-              value={deviceForm["AppKey"]}
-              onChange={(e) => {
-                setDeviceForm({ ...deviceForm, AppKey: e.target.value });
-                if (errors["AppKey"]) setErrors({ ...errors, AppKey: false });
-              }}
-              required
-            />
-            {errors["AppKey"] && <p className="text-red-500 text-xs mt-1">This field is required</p>}
           </div>
         </div>
 
         {/* ACTIONS */}
         <div className="flex justify-end gap-2 pt-3 border-t">
           <button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
-            Cancel
+            Cancelar
           </button>
           <button
             onClick={onSave}
             className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
           >
-            Save
+            Guardar
           </button>
         </div>
       </div>

src/pages/meters/MetersTable.tsx

@@ -28,15 +28,51 @@ export default function MetersTable({
         title="Meters"
         isLoading={isLoading}
         columns={[
-          { title: "Area Name", field: "areaName", render: (r: any) => r.areaName || "-" },
-          { title: "Account Number", field: "accountNumber", render: (r: any) => r.accountNumber || "-" },
-          { title: "User Name", field: "userName", render: (r: any) => r.userName || "-" },
-          { title: "User Address", field: "userAddress", render: (r: any) => r.userAddress || "-" },
-          { title: "Meter S/N", field: "meterSerialNumber", render: (r: any) => r.meterSerialNumber || "-" },
-          { title: "Meter Name", field: "meterName", render: (r: any) => r.meterName || "-" },
-          { title: "Protocol Type", field: "protocolType", render: (r: any) => r.protocolType || "-" },
-          { title: "Device ID", field: "deviceId", render: (r: any) => r.deviceId || "-" },
-          { title: "Device Name", field: "deviceName", render: (r: any) => r.deviceName || "-" },
+          { title: "Serial", field: "serialNumber", render: (r: Meter) => r.serialNumber || "-" },
+          { title: "Meter ID", field: "meterId", render: (r: Meter) => r.meterId || "-" },
+          { title: "Nombre", field: "name", render: (r: Meter) => r.name || "-" },
+          { title: "Ubicación", field: "location", render: (r: Meter) => r.location || "-" },
+          {
+            title: "Tipo",
+            field: "type",
+            render: (r: Meter) => {
+              const typeLabels: Record<string, string> = {
+                LORA: "LoRa",
+                LORAWAN: "LoRaWAN",
+                GRANDES: "Grandes Consumidores",
+              };
+              const typeColors: Record<string, string> = {
+                LORA: "text-green-600 border-green-600",
+                LORAWAN: "text-purple-600 border-purple-600",
+                GRANDES: "text-orange-600 border-orange-600",
+              };
+              const type = r.type || "LORA";
+              return (
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-semibold border ${typeColors[type] || "text-gray-600 border-gray-600"}`}
+                >
+                  {typeLabels[type] || type}
+                </span>
+              );
+            },
+          },
+          {
+            title: "Estado",
+            field: "status",
+            render: (r: Meter) => (
+              <span
+                className={`px-3 py-1 rounded-full text-xs font-semibold border ${
+                  r.status === "ACTIVE"
+                    ? "text-blue-600 border-blue-600"
+                    : "text-red-600 border-red-600"
+                }`}
+              >
+                {r.status || "-"}
+              </span>
+            ),
+          },
+          { title: "Concentrador", field: "concentratorName", render: (r: Meter) => r.concentratorName || "-" },
+          { title: "Última Lectura", field: "lastReadingValue", render: (r: Meter) => r.lastReadingValue?.toFixed(2) ?? "-" },
         ]}
         data={disabled ? [] : data}
         onRowClick={(_, rowData) => onRowClick(rowData as Meter)}

src/pages/meters/useMeters.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { fetchMeters, type Meter } from "../../api/meters";
+import { fetchProjects } from "../../api/projects";
 
 type UseMetersArgs = {
   initialProject?: string;
@@ -15,37 +16,43 @@ export function useMeters({ initialProject }: UseMetersArgs) {
   const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
   const [loadingMeters, setLoadingMeters] = useState(true);
 
-  const loadMeters = async () => {
-    setLoadingMeters(true);
+  const loadProjects = async () => {
     setLoadingProjects(true);
-
     try {
-      const data = await fetchMeters();
-
-      const projectsArray = [...new Set(data.map((r) => r.areaName))]
-        .filter(Boolean) as string[];
-
-      setAllProjects(projectsArray);
-      setMeters(data);
+      const projects = await fetchProjects();
+      const projectNames = projects.map((p) => p.name);
+      setAllProjects(projectNames);
 
       setSelectedProject((prev) => {
         if (prev) return prev;
         if (initialProject) return initialProject;
-        return projectsArray[0] ?? "";
+        return projectNames[0] ?? "";
       });
     } catch (error) {
-      console.error("Error loading meters:", error);
+      console.error("Error loading projects:", error);
       setAllProjects([]);
-      setMeters([]);
-      setSelectedProject("");
     } finally {
-      setLoadingMeters(false);
       setLoadingProjects(false);
     }
   };
 
-  // init
+  const loadMeters = async () => {
+    setLoadingMeters(true);
+
+    try {
+      const data = await fetchMeters();
+      setMeters(data);
+    } catch (error) {
+      console.error("Error loading meters:", error);
+      setMeters([]);
+    } finally {
+      setLoadingMeters(false);
+    }
+  };
+
+  // init - load projects and meters
   useEffect(() => {
+    loadProjects();
     loadMeters();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -61,13 +68,13 @@ export function useMeters({ initialProject }: UseMetersArgs) {
       setFilteredMeters([]);
       return;
     }
-    setFilteredMeters(meters.filter((m) => m.areaName === selectedProject));
+    setFilteredMeters(meters.filter((m) => m.projectName === selectedProject));
   }, [selectedProject, meters]);
 
   const projectsCounts = useMemo(() => {
     return meters.reduce<Record<string, number>>((acc, m) => {
-      const area = m.areaName ?? "SIN PROYECTO";
-      acc[area] = (acc[area] ?? 0) + 1;
+      const project = m.projectName ?? "SIN PROYECTO";
+      acc[project] = (acc[project] ?? 0) + 1;
       return acc;
     }, {});
   }, [meters]);

src/pages/projects/ProjectsPage.tsx

@@ -3,13 +3,13 @@ import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
 import {
   Project,
+  ProjectInput,
   fetchProjects,
   createProject as apiCreateProject,
   updateProject as apiUpdateProject,
   deleteProject as apiDeleteProject,
 } from "../../api/projects";
 
-/* ================= COMPONENT ================= */
 export default function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
@@ -19,20 +19,16 @@ export default function ProjectsPage() {
   const [showModal, setShowModal] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
 
-  const emptyProject: Omit<Project, "id"> = {
+  const emptyForm: ProjectInput = {
+    name: "",
+    description: "",
     areaName: "",
-    deviceSN: "",
-    deviceName: "",
-    deviceType: "",
-    deviceStatus: "ACTIVE",
-    operator: "",
-    installedTime: "",
-    communicationTime: "",
+    location: "",
+    status: "ACTIVE",
   };
 
-  const [form, setForm] = useState<Omit<Project, "id">>(emptyProject);
+  const [form, setForm] = useState<ProjectInput>(emptyForm);
 
-  /* ================= LOAD ================= */
   const loadProjects = async () => {
     setLoading(true);
     try {
@@ -50,7 +46,6 @@ export default function ProjectsPage() {
     loadProjects();
   }, []);
 
-
   const handleSave = async () => {
     try {
       if (editingId) {
@@ -65,7 +60,7 @@ export default function ProjectsPage() {
 
       setShowModal(false);
       setEditingId(null);
-      setForm(emptyProject);
+      setForm(emptyForm);
       setActiveProject(null);
     } catch (error) {
       console.error("Error saving project:", error);
@@ -81,7 +76,7 @@ export default function ProjectsPage() {
     if (!activeProject) return;
 
     const confirmDelete = window.confirm(
-      `Are you sure you want to delete the project "${activeProject.deviceName}"?`
+      `¿Estás seguro que quieres eliminar el proyecto "${activeProject.name}"?`
     );
 
     if (!confirmDelete) return;
@@ -100,14 +95,31 @@ export default function ProjectsPage() {
     }
   };
 
-  /* ================= FILTER ================= */
+  const openEditModal = () => {
+    if (!activeProject) return;
+    setEditingId(activeProject.id);
+    setForm({
+      name: activeProject.name,
+      description: activeProject.description ?? "",
+      areaName: activeProject.areaName,
+      location: activeProject.location ?? "",
+      status: activeProject.status,
+    });
+    setShowModal(true);
+  };
+
+  const openCreateModal = () => {
+    setForm(emptyForm);
+    setEditingId(null);
+    setShowModal(true);
+  };
+
   const filtered = projects.filter((p) =>
-    `${p.areaName} ${p.deviceName} ${p.deviceSN}`
+    `${p.name} ${p.areaName} ${p.description ?? ""}`
       .toLowerCase()
       .includes(search.toLowerCase())
   );
 
-  /* ================= UI ================= */
   return (
     <div className="flex gap-6 p-6 w-full bg-gray-100">
       <div className="flex-1 flex flex-col gap-6">
@@ -120,41 +132,23 @@ export default function ProjectsPage() {
         >
           <div>
             <h1 className="text-2xl font-bold">Project Management</h1>
-            <p className="text-sm text-blue-100">Projects registered</p>
+            <p className="text-sm text-blue-100">Proyectos registrados</p>
           </div>
 
           <div className="flex gap-3">
             <button
-              onClick={() => {
-                setForm(emptyProject);
-                setEditingId(null);
-                setShowModal(true);
-              }}
+              onClick={openCreateModal}
               className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"
             >
-              <Plus size={16} /> Add
+              <Plus size={16} /> Agregar
             </button>
 
             <button
-              onClick={() => {
-                if (!activeProject) return;
-                setEditingId(activeProject.id);
-                setForm({
-                  areaName: activeProject.areaName,
-                  deviceSN: activeProject.deviceSN,
-                  deviceName: activeProject.deviceName,
-                  deviceType: activeProject.deviceType,
-                  deviceStatus: activeProject.deviceStatus,
-                  operator: activeProject.operator,
-                  installedTime: activeProject.installedTime,
-                  communicationTime: activeProject.communicationTime,
-                });
-                setShowModal(true);
-              }}
+              onClick={openEditModal}
               disabled={!activeProject}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
-              <Pencil size={16} /> Edit
+              <Pencil size={16} /> Editar
             </button>
 
             <button
@@ -162,14 +156,14 @@ export default function ProjectsPage() {
               disabled={!activeProject}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
-              <Trash2 size={16} /> Delete
+              <Trash2 size={16} /> Eliminar
             </button>
 
             <button
               onClick={loadProjects}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
             >
-              <RefreshCcw size={16} /> Refresh
+              <RefreshCcw size={16} /> Actualizar
             </button>
           </div>
         </div>
@@ -177,38 +171,40 @@ export default function ProjectsPage() {
         {/* SEARCH */}
         <input
           className="bg-white rounded-lg shadow px-4 py-2 text-sm"
-          placeholder="Search project..."
+          placeholder="Buscar proyecto..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
 
         {/* TABLE */}
         <MaterialTable
-          title="Projects"
+          title="Proyectos"
           isLoading={loading}
           columns={[
-            { title: "Area Name", field: "areaName" },
-            { title: "Device S/N", field: "deviceSN" },
-            { title: "Device Name", field: "deviceName" },
-            { title: "Device Type", field: "deviceType" },
+            { title: "Nombre", field: "name" },
+            { title: "Area", field: "areaName" },
+            { title: "Descripción", field: "description", render: (rowData: Project) => rowData.description || "-" },
+            { title: "Ubicación", field: "location", render: (rowData: Project) => rowData.location || "-" },
             {
-              title: "Status",
-              field: "deviceStatus",
-              render: (rowData) => (
+              title: "Estado",
+              field: "status",
+              render: (rowData: Project) => (
                 <span
                   className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                    rowData.deviceStatus === "ACTIVE"
+                    rowData.status === "ACTIVE"
                       ? "text-blue-600 border-blue-600"
                       : "text-red-600 border-red-600"
                   }`}
                 >
-                  {rowData.deviceStatus}
+                  {rowData.status}
                 </span>
               ),
             },
-            { title: "Operator", field: "operator" },
-            { title: "Installed Time", field: "installedTime" },
-            { title: "Communication Name", field: "communicationTime" },
+            {
+              title: "Creado",
+              field: "createdAt",
+              render: (rowData: Project) => new Date(rowData.createdAt).toLocaleDateString(),
+            },
           ]}
           data={filtered}
           onRowClick={(_, rowData) => setActiveProject(rowData as Project)}
@@ -226,8 +222,8 @@ export default function ProjectsPage() {
           localization={{
             body: {
               emptyDataSourceMessage: loading
-                ? "Loading projects..."
-                : "No projects found. Click 'Add' to create your first project.",
+                ? "Cargando proyectos..."
+                : "No hay proyectos. Haz clic en 'Agregar' para crear uno.",
             },
           }}
         />
@@ -235,85 +231,78 @@ export default function ProjectsPage() {
 
       {/* MODAL */}
       {showModal && (
-        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
-          <div className="bg-white rounded-xl p-6 w-96 space-y-3">
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl p-6 w-[450px] space-y-4">
             <h2 className="text-lg font-semibold">
-              {editingId ? "Edit Project" : "Add Project"}
+              {editingId ? "Editar Proyecto" : "Agregar Proyecto"}
             </h2>
 
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Area Name"
-              value={form.areaName}
-              onChange={(e) => setForm({ ...form, areaName: e.target.value })}
-            />
+            <div>
+              <label className="block text-sm text-gray-600 mb-1">Nombre *</label>
+              <input
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Nombre del proyecto"
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+              />
+            </div>
 
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Device S/N"
-              value={form.deviceSN}
-              onChange={(e) => setForm({ ...form, deviceSN: e.target.value })}
-            />
+            <div>
+              <label className="block text-sm text-gray-600 mb-1">Area *</label>
+              <input
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Nombre del area"
+                value={form.areaName}
+                onChange={(e) => setForm({ ...form, areaName: e.target.value })}
+              />
+            </div>
 
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Device Name"
-              value={form.deviceName}
-              onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
-            />
+            <div>
+              <label className="block text-sm text-gray-600 mb-1">Descripción</label>
+              <textarea
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Descripción del proyecto (opcional)"
+                rows={3}
+                value={form.description ?? ""}
+                onChange={(e) => setForm({ ...form, description: e.target.value || undefined })}
+              />
+            </div>
 
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Device Type"
-              value={form.deviceType}
-              onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
-            />
+            <div>
+              <label className="block text-sm text-gray-600 mb-1">Ubicación</label>
+              <input
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Ubicación (opcional)"
+                value={form.location ?? ""}
+                onChange={(e) => setForm({ ...form, location: e.target.value || undefined })}
+              />
+            </div>
 
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Operator"
-              value={form.operator}
-              onChange={(e) => setForm({ ...form, operator: e.target.value })}
-            />
+            <div>
+              <label className="block text-sm text-gray-600 mb-1">Estado</label>
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={form.status ?? "ACTIVE"}
+                onChange={(e) => setForm({ ...form, status: e.target.value })}
+              >
+                <option value="ACTIVE">Activo</option>
+                <option value="INACTIVE">Inactivo</option>
+                <option value="SUSPENDED">Suspendido</option>
+              </select>
+            </div>
 
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Installed Time"
-              value={form.installedTime}
-              onChange={(e) =>
-                setForm({ ...form, installedTime: e.target.value })
-              }
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded"
-              placeholder="Communication Time"
-              value={form.communicationTime}
-              onChange={(e) =>
-                setForm({ ...form, communicationTime: e.target.value })
-              }
-            />
-
-            <button
-              onClick={() =>
-                setForm({
-                  ...form,
-                  deviceStatus:
-                    form.deviceStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE",
-                })
-              }
-              className="w-full border rounded px-3 py-2"
-            >
-              Status: {form.deviceStatus}
-            </button>
-
-            <div className="flex justify-end gap-2 pt-3">
-              <button onClick={() => setShowModal(false)}>Cancel</button>
+            <div className="flex justify-end gap-2 pt-3 border-t">
+              <button
+                onClick={() => setShowModal(false)}
+                className="px-4 py-2 rounded hover:bg-gray-100"
+              >
+                Cancelar
+              </button>
               <button
                 onClick={handleSave}
-                className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
+                className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
               >
-                Save
+                Guardar
               </button>
             </div>
           </div>