Agregar carga masiva de lecturas y corregir manejo de respuestas paginadas

- Implementar carga masiva de lecturas via Excel (backend y frontend) - Corregir cliente API para manejar respuestas con paginación - Eliminar referencias a device_id (columna inexistente) - Cambiar areaName por meterLocation en lecturas - Actualizar fetchProjects y fetchConcentrators para paginación - Agregar documentación del estado actual y cambios Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-23 21:23:41 +00:00
parent c81a18987f
commit ab97987c6a
14 changed files with 1154 additions and 35 deletions
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -230,6 +230,13 @@ async function parseResponse<T>(response: Response): Promise<T> {
            data.error?.errors
          );
        }
+        // If response has pagination, return object with data and pagination
+        if ('pagination' in data) {
+          return {
+            data: data.data,
+            pagination: data.pagination,
+          } as T;
+        }
        return data.data as T;
      }
    }
--- a/src/api/concentrators.ts
+++ b/src/api/concentrators.ts
@@ -74,8 +74,15 @@ export interface ConcentratorInput {
 */
 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);
+  const response = await apiClient.get<{ data: Record<string, unknown>[]; pagination?: unknown } | Record<string, unknown>[]>('/api/concentrators', { params });
+
+  // Handle paginated response
+  if (response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)) {
+    return transformArray<Concentrator>(response.data);
+  }
+
+  // Handle array response (fallback)
+  return transformArray<Concentrator>(response as Record<string, unknown>[]);
 }

 /**
--- a/src/api/meters.ts
+++ b/src/api/meters.ts
@@ -88,14 +88,23 @@ export interface MeterReading {
 * @returns Promise resolving to an array of meters
 */
 export async function fetchMeters(filters?: { concentratorId?: string; projectId?: string }): Promise<Meter[]> {
-  const params: Record<string, string> = {};
+  const params: Record<string, string> = {
+    pageSize: '1000', // Request up to 1000 meters
+  };
  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
+  const response = await apiClient.get<{ data: Record<string, unknown>[]; pagination: unknown }>('/api/meters', {
+    params
  });
-  return transformArray<Meter>(response);
+
+  // Handle paginated response
+  if (response && typeof response === 'object' && 'data' in response) {
+    return transformArray<Meter>(response.data);
+  }
+
+  // Fallback for non-paginated response
+  return transformArray<Meter>(response as unknown as Record<string, unknown>[]);
 }

 /**
@@ -192,13 +201,19 @@ export interface BulkUploadResult {
 * @returns Promise resolving to upload result
 */
 export async function bulkUploadMeters(file: File): Promise<BulkUploadResult> {
+  const token = localStorage.getItem('grh_access_token');
+
+  if (!token) {
+    throw new Error('No hay sesión activa. Por favor inicia sesión nuevamente.');
+  }
+
  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')}`,
+      'Authorization': `Bearer ${token}`,
    },
    body: formData,
  });
@@ -215,15 +230,27 @@ export async function bulkUploadMeters(file: File): Promise<BulkUploadResult> {
 * Download meter template Excel file
 */
 export async function downloadMeterTemplate(): Promise<void> {
+  const token = localStorage.getItem('grh_access_token');
+
+  if (!token) {
+    throw new Error('No hay sesión activa. Por favor inicia sesión nuevamente.');
+  }
+
  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')}`,
+      'Authorization': `Bearer ${token}`,
    },
  });

  if (!response.ok) {
-    throw new Error('Error descargando la plantilla');
+    // Try to get error message from response
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || `Error ${response.status}: ${response.statusText}`);
+    }
+    throw new Error(`Error ${response.status}: ${response.statusText}`);
  }

  const blob = await response.blob();
--- a/src/api/projects.ts
+++ b/src/api/projects.ts
@@ -61,8 +61,15 @@ export interface ProjectInput {
 * @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 response = await apiClient.get<{ data: Record<string, unknown>[]; pagination?: unknown } | Record<string, unknown>[]>('/api/projects');
+
+  // Handle paginated response
+  if (response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)) {
+    return transformArray<Project>(response.data);
+  }
+
+  // Handle array response (fallback)
+  return transformArray<Project>(response as Record<string, unknown>[]);
 }

 /**
--- a/src/api/readings.ts
+++ b/src/api/readings.ts
@@ -36,7 +36,6 @@ function transformArray<T>(arr: Record<string, unknown>[]): T[] {
 export interface MeterReading {
  id: string;
  meterId: string;
-  deviceId: string | null;
  readingValue: number;
  readingType: string;
  batteryLevel: number | null;
@@ -47,8 +46,11 @@ export interface MeterReading {
  // From join with meters
  meterSerialNumber: string;
  meterName: string;
-  areaName: string | null;
+  meterLocation: string | null;
+  concentratorId: string;
+  concentratorName: string;
  projectId: string;
+  projectName: string;
 }

 /**
@@ -85,7 +87,7 @@ export interface PaginatedResponse<T> {
 export interface ReadingFilters {
  meterId?: string;
  projectId?: string;
-  areaName?: string;
+  concentratorId?: string;
  startDate?: string;
  endDate?: string;
  readingType?: string;
@@ -103,7 +105,7 @@ export async function fetchReadings(filters?: ReadingFilters): Promise<Paginated

  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?.concentratorId) params.concentrator_id = filters.concentratorId;
  if (filters?.startDate) params.start_date = filters.startDate;
  if (filters?.endDate) params.end_date = filters.endDate;
  if (filters?.readingType) params.reading_type = filters.readingType;
@@ -147,7 +149,6 @@ export async function fetchConsumptionSummary(projectId?: string): Promise<Consu
 */
 export interface ReadingInput {
  meterId: string;
-  deviceId?: string;
  readingValue: number;
  readingType?: string;
  batteryLevel?: number;
@@ -164,7 +165,6 @@ export interface ReadingInput {
 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,
@@ -184,3 +184,88 @@ export async function createReading(data: ReadingInput): Promise<MeterReading> {
 export async function deleteReading(id: string): Promise<void> {
  return apiClient.delete<void>(`/api/readings/${id}`);
 }
+
+/**
+ * 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>;
+    }>;
+  };
+}
+
+/**
+ * Bulk upload readings from Excel file
+ * @param file - Excel file to upload
+ * @returns Promise resolving to upload result
+ */
+export async function bulkUploadReadings(file: File): Promise<BulkUploadResult> {
+  const token = localStorage.getItem('grh_access_token');
+
+  if (!token) {
+    throw new Error('No hay sesión activa. Por favor inicia sesión nuevamente.');
+  }
+
+  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/readings`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Error en la carga masiva');
+  }
+
+  return response.json();
+}
+
+/**
+ * Download readings template Excel file
+ */
+export async function downloadReadingTemplate(): Promise<void> {
+  const token = localStorage.getItem('grh_access_token');
+
+  if (!token) {
+    throw new Error('No hay sesión activa. Por favor inicia sesión nuevamente.');
+  }
+
+  const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'}/api/bulk-upload/readings/template`, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) {
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || `Error ${response.status}: ${response.statusText}`);
+    }
+    throw new Error(`Error ${response.status}: ${response.statusText}`);
+  }
+
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'plantilla_lecturas.xlsx';
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+}
--- a/src/pages/consumption/ConsumptionPage.tsx
+++ b/src/pages/consumption/ConsumptionPage.tsx
@@ -12,6 +12,7 @@ import {
  Filter,
  X,
  Activity,
+  Upload,
 } from "lucide-react";
 import {
  fetchReadings,
@@ -21,6 +22,7 @@ import {
  type Pagination,
 } from "../../api/readings";
 import { fetchProjects, type Project } from "../../api/projects";
+import ReadingsBulkUploadModal from "./ReadingsBulkUploadModal";

 export default function ConsumptionPage() {
  const [readings, setReadings] = useState<MeterReading[]>([]);
@@ -41,6 +43,7 @@ export default function ConsumptionPage() {
  const [endDate, setEndDate] = useState<string>("");
  const [search, setSearch] = useState<string>("");
  const [showFilters, setShowFilters] = useState(false);
+  const [showBulkUpload, setShowBulkUpload] = useState(false);

  useEffect(() => {
    const loadProjects = async () => {
@@ -92,7 +95,7 @@ export default function ConsumptionPage() {
      (r) =>
        (r.meterSerialNumber ?? "").toLowerCase().includes(q) ||
        (r.meterName ?? "").toLowerCase().includes(q) ||
-        (r.areaName ?? "").toLowerCase().includes(q) ||
+        (r.meterLocation ?? "").toLowerCase().includes(q) ||
        String(r.readingValue).includes(q)
    );
  }, [readings, search]);
@@ -121,12 +124,12 @@ export default function ConsumptionPage() {
  };

  const exportToCSV = () => {
-    const headers = ["Fecha", "Medidor", "Serial", "Área", "Valor", "Tipo", "Batería", "Señal"];
+    const headers = ["Fecha", "Medidor", "Serial", "Ubicación", "Valor", "Tipo", "Batería", "Señal"];
    const rows = filteredReadings.map((r) => [
      formatFullDate(r.receivedAt),
      r.meterName || "—",
      r.meterSerialNumber || "—",
-      r.areaName || "—",
+      r.meterLocation || "—",
      r.readingValue.toFixed(2),
      r.readingType || "—",
      r.batteryLevel !== null ? `${r.batteryLevel}%` : "—",
@@ -162,6 +165,13 @@ export default function ConsumptionPage() {
            </p>
          </div>
          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowBulkUpload(true)}
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-emerald-500 to-teal-600 rounded-xl hover:from-emerald-600 hover:to-teal-700 transition-all shadow-sm shadow-emerald-500/25"
+            >
+              <Upload size={16} />
+              Carga Masiva
+            </button>
            <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"
@@ -353,7 +363,7 @@ export default function ConsumptionPage() {
                    Serial
                  </th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                    Área
+                    Ubicación
                  </th>
                  <th className="px-5 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
                    Consumo
@@ -415,7 +425,7 @@ export default function ConsumptionPage() {
                        </code>
                      </td>
                      <td className="px-5 py-3.5">
-                        <span className="text-sm text-slate-600">{reading.areaName || "—"}</span>
+                        <span className="text-sm text-slate-600">{reading.meterLocation || "—"}</span>
                      </td>
                      <td className="px-5 py-3.5 text-right">
                        <span className="text-sm font-semibold text-slate-800 tabular-nums">
@@ -440,6 +450,16 @@ export default function ConsumptionPage() {
          </div>
        </div>
      </div>
+
+      {showBulkUpload && (
+        <ReadingsBulkUploadModal
+          onClose={() => setShowBulkUpload(false)}
+          onSuccess={() => {
+            loadData(1);
+            setShowBulkUpload(false);
+          }}
+        />
+      )}
    </div>
  );
 }
--- a/src/pages/consumption/ReadingsBulkUploadModal.tsx
+++ b/src/pages/consumption/ReadingsBulkUploadModal.tsx
@@ -0,0 +1,210 @@
+import { useState, useRef } from "react";
+import { Upload, Download, X, AlertCircle, CheckCircle } from "lucide-react";
+import { bulkUploadReadings, downloadReadingTemplate, type BulkUploadResult } from "../../api/readings";
+
+type Props = {
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+export default function ReadingsBulkUploadModal({ 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 bulkUploadReadings(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 downloadReadingTemplate();
+    } 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 Lecturas</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 las lecturas (meter_serial y reading_value son obligatorios)</li>
+            <li>El meter_serial debe coincidir con un medidor 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">Insertadas: {result.data.inserted}</p>
+              {result.data.failed > 0 && (
+                <p className="text-red-600">Fallidas: {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 Lecturas
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}