613fb2d787
Implements the full ADMIN → ORGANISMO_OPERADOR → OPERATOR permission hierarchy with scope-filtered data access across all backend services. Adds organismos operadores management (ADMIN only) and a new Histórico page for viewing per-meter reading history with chart, consumption stats, and CSV export. Key changes: - Backend: 3-level scope filtering on all services (meters, readings, projects, users) - Backend: Protect GET /meters routes with authenticateToken for role-based filtering - Backend: Pass requestingUser to reading service for scoped meter readings - Frontend: New HistoricoPage with meter selector, AreaChart, paginated table - Frontend: Consumption cards (Actual, Pasado, Diferencial) above date filters - Frontend: Meter search by name, serial, location, CESPT account, cadastral key - Frontend: OrganismosPage, updated Sidebar with 3-level visibility - SQL migrations for organismos_operadores table and FK columns Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
991 lines
42 KiB
TypeScript
991 lines
42 KiB
TypeScript
import { useEffect, useState, useMemo, useRef } from "react";
|
|
import {
|
|
History,
|
|
RefreshCw,
|
|
Download,
|
|
Search,
|
|
X,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Droplets,
|
|
MapPin,
|
|
Radio,
|
|
Calendar,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Minus,
|
|
} from "lucide-react";
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
import {
|
|
fetchMeters,
|
|
fetchMeterReadings,
|
|
type Meter,
|
|
type MeterReading,
|
|
type PaginatedMeterReadings,
|
|
} from "../../api/meters";
|
|
|
|
export default function HistoricoPage() {
|
|
const [meters, setMeters] = useState<Meter[]>([]);
|
|
const [metersLoading, setMetersLoading] = useState(true);
|
|
const [meterSearch, setMeterSearch] = useState("");
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
const [selectedMeter, setSelectedMeter] = useState<Meter | null>(null);
|
|
|
|
const [readings, setReadings] = useState<MeterReading[]>([]);
|
|
const [pagination, setPagination] = useState({
|
|
page: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
totalPages: 0,
|
|
});
|
|
const [loadingReadings, setLoadingReadings] = useState(false);
|
|
|
|
const [startDate, setStartDate] = useState("");
|
|
const [endDate, setEndDate] = useState("");
|
|
|
|
const [consumoActual, setConsumoActual] = useState<number | null>(null);
|
|
const [consumoPasado, setConsumoPasado] = useState<number | null>(null);
|
|
const [loadingStats, setLoadingStats] = useState(false);
|
|
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Load meters on mount
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
try {
|
|
const data = await fetchMeters();
|
|
setMeters(data);
|
|
} catch (err) {
|
|
console.error("Error loading meters:", err);
|
|
} finally {
|
|
setMetersLoading(false);
|
|
}
|
|
};
|
|
load();
|
|
}, []);
|
|
|
|
// Close dropdown on outside click
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
|
|
setDropdownOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handler);
|
|
return () => document.removeEventListener("mousedown", handler);
|
|
}, []);
|
|
|
|
// Filter meters by search
|
|
const filteredMeters = useMemo(() => {
|
|
if (!meterSearch.trim()) return meters;
|
|
const q = meterSearch.toLowerCase();
|
|
return meters.filter(
|
|
(m) =>
|
|
m.name.toLowerCase().includes(q) ||
|
|
m.serialNumber.toLowerCase().includes(q) ||
|
|
(m.location ?? "").toLowerCase().includes(q) ||
|
|
(m.cesptAccount ?? "").toLowerCase().includes(q) ||
|
|
(m.cadastralKey ?? "").toLowerCase().includes(q)
|
|
);
|
|
}, [meters, meterSearch]);
|
|
|
|
// Load readings when meter or filters change
|
|
const loadReadings = async (page = 1, pageSize?: number) => {
|
|
if (!selectedMeter) return;
|
|
setLoadingReadings(true);
|
|
try {
|
|
const result: PaginatedMeterReadings = await fetchMeterReadings(
|
|
selectedMeter.id,
|
|
{
|
|
startDate: startDate || undefined,
|
|
endDate: endDate || undefined,
|
|
page,
|
|
pageSize: pageSize ?? pagination.pageSize,
|
|
}
|
|
);
|
|
setReadings(result.data);
|
|
setPagination(result.pagination);
|
|
} catch (err) {
|
|
console.error("Error loading readings:", err);
|
|
} finally {
|
|
setLoadingReadings(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (selectedMeter) {
|
|
loadReadings(1);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedMeter, startDate, endDate]);
|
|
|
|
// Load consumption stats when meter changes
|
|
useEffect(() => {
|
|
if (!selectedMeter) {
|
|
setConsumoActual(null);
|
|
setConsumoPasado(null);
|
|
return;
|
|
}
|
|
|
|
const loadStats = async () => {
|
|
setLoadingStats(true);
|
|
try {
|
|
// Consumo Actual: latest reading (today or most recent)
|
|
const today = new Date();
|
|
const todayStr = today.toISOString().split("T")[0];
|
|
const latestResult = await fetchMeterReadings(selectedMeter.id, {
|
|
endDate: todayStr,
|
|
page: 1,
|
|
pageSize: 1,
|
|
});
|
|
const actual = latestResult.data.length > 0
|
|
? Number(latestResult.data[0].readingValue)
|
|
: null;
|
|
setConsumoActual(actual);
|
|
|
|
// Consumo Pasado: reading closest to first day of last month
|
|
const firstOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
|
const secondOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 2);
|
|
const pastResult = await fetchMeterReadings(selectedMeter.id, {
|
|
startDate: firstOfLastMonth.toISOString().split("T")[0],
|
|
endDate: secondOfLastMonth.toISOString().split("T")[0],
|
|
page: 1,
|
|
pageSize: 1,
|
|
});
|
|
|
|
if (pastResult.data.length > 0) {
|
|
setConsumoPasado(Number(pastResult.data[0].readingValue));
|
|
} else {
|
|
// Fallback: get the oldest reading around that date range
|
|
const endOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
|
|
const fallbackResult = await fetchMeterReadings(selectedMeter.id, {
|
|
startDate: firstOfLastMonth.toISOString().split("T")[0],
|
|
endDate: endOfLastMonth.toISOString().split("T")[0],
|
|
page: 1,
|
|
pageSize: 1,
|
|
});
|
|
setConsumoPasado(
|
|
fallbackResult.data.length > 0
|
|
? Number(fallbackResult.data[0].readingValue)
|
|
: null
|
|
);
|
|
}
|
|
} catch (err) {
|
|
console.error("Error loading consumption stats:", err);
|
|
} finally {
|
|
setLoadingStats(false);
|
|
}
|
|
};
|
|
loadStats();
|
|
}, [selectedMeter]);
|
|
|
|
const diferencial = useMemo(() => {
|
|
if (consumoActual === null || consumoPasado === null) return null;
|
|
return consumoActual - consumoPasado;
|
|
}, [consumoActual, consumoPasado]);
|
|
|
|
const handleSelectMeter = (meter: Meter) => {
|
|
setSelectedMeter(meter);
|
|
setMeterSearch(meter.name || meter.serialNumber);
|
|
setDropdownOpen(false);
|
|
setReadings([]);
|
|
setPagination({ page: 1, pageSize: pagination.pageSize, total: 0, totalPages: 0 });
|
|
};
|
|
|
|
const handlePageChange = (newPage: number) => {
|
|
loadReadings(newPage);
|
|
};
|
|
|
|
const handlePageSizeChange = (newSize: number) => {
|
|
setPagination((prev) => ({ ...prev, pageSize: newSize, page: 1 }));
|
|
loadReadings(1, newSize);
|
|
};
|
|
|
|
// Chart data: readings sorted ascending by date
|
|
const chartData = useMemo(() => {
|
|
return [...readings]
|
|
.sort((a, b) => new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime())
|
|
.map((r) => ({
|
|
date: new Date(r.receivedAt).toLocaleDateString("es-MX", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
}),
|
|
fullDate: new Date(r.receivedAt).toLocaleString("es-MX", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}),
|
|
value: Number(r.readingValue),
|
|
}));
|
|
}, [readings]);
|
|
|
|
// Compute tight Y-axis domain for chart
|
|
const chartDomain = useMemo(() => {
|
|
if (chartData.length === 0) return [0, 100];
|
|
const values = chartData.map((d) => d.value);
|
|
const min = Math.min(...values);
|
|
const max = Math.max(...values);
|
|
const range = max - min;
|
|
const padding = range > 0 ? range * 0.15 : max * 0.05 || 1;
|
|
return [
|
|
Math.max(0, Math.floor(min - padding)),
|
|
Math.ceil(max + padding),
|
|
];
|
|
}, [chartData]);
|
|
|
|
const formatDate = (dateStr: string | null): string => {
|
|
if (!dateStr) return "—";
|
|
return new Date(dateStr).toLocaleString("es-MX", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
};
|
|
|
|
const exportToCSV = () => {
|
|
if (!selectedMeter || readings.length === 0) return;
|
|
const headers = ["Fecha/Hora", "Lectura (m³)", "Tipo", "Batería", "Señal"];
|
|
const rows = readings.map((r) => [
|
|
formatDate(r.receivedAt),
|
|
Number(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);
|
|
const serial = selectedMeter.serialNumber || "meter";
|
|
const date = new Date().toISOString().split("T")[0];
|
|
link.download = `historico_${serial}_${date}.csv`;
|
|
link.click();
|
|
};
|
|
|
|
const clearDateFilters = () => {
|
|
setStartDate("");
|
|
setEndDate("");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-full bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-zinc-950 dark:via-zinc-950 dark:to-zinc-950 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 dark:text-white flex items-center gap-2">
|
|
<History size={28} />
|
|
{"Histórico de Tomas"}
|
|
</h1>
|
|
<p className="text-slate-500 dark:text-zinc-400 text-sm mt-0.5">
|
|
Consulta el historial de lecturas por medidor
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => loadReadings(pagination.page)}
|
|
disabled={!selectedMeter}
|
|
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 dark:text-zinc-300 bg-white dark:bg-zinc-800 border border-slate-200 dark:border-zinc-700 rounded-xl hover:bg-slate-50 dark:hover:bg-zinc-700 hover:border-slate-300 dark:hover:border-zinc-600 transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<RefreshCw size={16} />
|
|
Actualizar
|
|
</button>
|
|
<button
|
|
onClick={exportToCSV}
|
|
disabled={readings.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 CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Meter Selector */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 p-5">
|
|
<label className="block text-xs font-medium text-slate-500 dark:text-zinc-400 uppercase tracking-wide mb-2">
|
|
Seleccionar Medidor
|
|
</label>
|
|
<div className="relative" ref={dropdownRef}>
|
|
<Search
|
|
size={18}
|
|
className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={meterSearch}
|
|
onChange={(e) => {
|
|
setMeterSearch(e.target.value);
|
|
setDropdownOpen(true);
|
|
}}
|
|
onFocus={() => setDropdownOpen(true)}
|
|
placeholder={metersLoading ? "Cargando medidores..." : "Buscar por nombre, serial, ubicación, cuenta CESPT o clave catastral..."}
|
|
disabled={metersLoading}
|
|
className="w-full pl-10 pr-10 py-2.5 text-sm bg-slate-50 dark:bg-zinc-800 dark:text-zinc-100 border border-slate-200 dark:border-zinc-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition-all"
|
|
/>
|
|
{meterSearch && (
|
|
<button
|
|
onClick={() => {
|
|
setMeterSearch("");
|
|
setSelectedMeter(null);
|
|
setReadings([]);
|
|
setDropdownOpen(false);
|
|
}}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-zinc-300"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Dropdown */}
|
|
{dropdownOpen && filteredMeters.length > 0 && (
|
|
<div className="absolute z-20 mt-1 w-full max-h-64 overflow-auto bg-white dark:bg-zinc-800 border border-slate-200 dark:border-zinc-700 rounded-xl shadow-lg">
|
|
{filteredMeters.slice(0, 50).map((meter) => (
|
|
<button
|
|
key={meter.id}
|
|
onClick={() => handleSelectMeter(meter)}
|
|
className={`w-full text-left px-4 py-3 hover:bg-blue-50 dark:hover:bg-zinc-700 transition-colors border-b border-slate-100 dark:border-zinc-700 last:border-0 ${
|
|
selectedMeter?.id === meter.id ? "bg-blue-50 dark:bg-zinc-700" : ""
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-800 dark:text-zinc-100">
|
|
{meter.name}
|
|
</p>
|
|
<p className="text-xs text-slate-500 dark:text-zinc-400">
|
|
{"Serial: "}{meter.serialNumber}
|
|
{meter.location && ` · ${meter.location}`}
|
|
</p>
|
|
{(meter.cesptAccount || meter.cadastralKey) && (
|
|
<p className="text-xs text-slate-400 dark:text-zinc-500">
|
|
{meter.cesptAccount && `CESPT: ${meter.cesptAccount}`}
|
|
{meter.cesptAccount && meter.cadastralKey && " · "}
|
|
{meter.cadastralKey && `Catastral: ${meter.cadastralKey}`}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{meter.projectName && (
|
|
<span className="text-xs text-slate-400 dark:text-zinc-500 shrink-0 ml-3">
|
|
{meter.projectName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{dropdownOpen && meterSearch && filteredMeters.length === 0 && !metersLoading && (
|
|
<div className="absolute z-20 mt-1 w-full bg-white dark:bg-zinc-800 border border-slate-200 dark:border-zinc-700 rounded-xl shadow-lg p-4 text-center text-sm text-slate-500 dark:text-zinc-400">
|
|
No se encontraron medidores
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* No meter selected state */}
|
|
{!selectedMeter && (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 p-16 text-center">
|
|
<div className="w-20 h-20 bg-slate-100 dark:bg-zinc-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<Droplets size={40} className="text-slate-400" />
|
|
</div>
|
|
<p className="text-slate-600 dark:text-zinc-300 font-medium text-lg">
|
|
Selecciona un medidor
|
|
</p>
|
|
<p className="text-slate-400 dark:text-zinc-500 text-sm mt-1">
|
|
Busca y selecciona un medidor para ver su historial de lecturas
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content when meter is selected */}
|
|
{selectedMeter && (
|
|
<>
|
|
{/* Meter Info Card */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 p-5">
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
<InfoItem
|
|
icon={<Radio size={16} />}
|
|
label="Serial"
|
|
value={selectedMeter.serialNumber}
|
|
/>
|
|
<InfoItem
|
|
icon={<Droplets size={16} />}
|
|
label="Nombre"
|
|
value={selectedMeter.name}
|
|
/>
|
|
<InfoItem
|
|
icon={<MapPin size={16} />}
|
|
label="Proyecto"
|
|
value={selectedMeter.projectName || "—"}
|
|
/>
|
|
<InfoItem
|
|
icon={<MapPin size={16} />}
|
|
label="Ubicación"
|
|
value={selectedMeter.location || "—"}
|
|
/>
|
|
<InfoItem
|
|
icon={<Calendar size={16} />}
|
|
label="Última Lectura"
|
|
value={
|
|
selectedMeter.lastReadingValue !== null
|
|
? `${Number(selectedMeter.lastReadingValue).toFixed(2)} m³`
|
|
: "Sin datos"
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Consumption Stats */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<ConsumptionCard
|
|
label="Consumo Actual"
|
|
sublabel="Lectura más reciente"
|
|
value={consumoActual}
|
|
loading={loadingStats}
|
|
gradient="from-blue-500 to-blue-600"
|
|
/>
|
|
<ConsumptionCard
|
|
label="Consumo Pasado"
|
|
sublabel="1ro del mes anterior"
|
|
value={consumoPasado}
|
|
loading={loadingStats}
|
|
gradient="from-slate-500 to-slate-600"
|
|
/>
|
|
<div className="relative bg-white dark:bg-zinc-900 rounded-2xl p-5 shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 overflow-hidden group hover:shadow-md transition-all">
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-slate-500 dark:text-zinc-400">
|
|
Diferencial
|
|
</p>
|
|
{loadingStats ? (
|
|
<div className="h-8 w-24 bg-slate-100 dark:bg-zinc-700 rounded-lg animate-pulse" />
|
|
) : diferencial !== null ? (
|
|
<p className={`text-2xl font-bold tabular-nums ${
|
|
diferencial > 0
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: diferencial < 0
|
|
? "text-red-600 dark:text-red-400"
|
|
: "text-slate-800 dark:text-white"
|
|
}`}>
|
|
{diferencial > 0 ? "+" : ""}{diferencial.toFixed(2)}
|
|
<span className="text-sm font-normal ml-1">{"m³"}</span>
|
|
</p>
|
|
) : (
|
|
<p className="text-2xl font-bold text-slate-400 dark:text-zinc-500">{"—"}</p>
|
|
)}
|
|
<p className="text-xs text-slate-400 dark:text-zinc-500">
|
|
Actual - Pasado
|
|
</p>
|
|
</div>
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform ${
|
|
diferencial !== null && diferencial > 0
|
|
? "bg-gradient-to-br from-emerald-500 to-emerald-600"
|
|
: diferencial !== null && diferencial < 0
|
|
? "bg-gradient-to-br from-red-500 to-red-600"
|
|
: "bg-gradient-to-br from-slate-400 to-slate-500"
|
|
}`}>
|
|
{diferencial !== null && diferencial > 0 ? (
|
|
<TrendingUp size={22} />
|
|
) : diferencial !== null && diferencial < 0 ? (
|
|
<TrendingDown size={22} />
|
|
) : (
|
|
<Minus size={22} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Date Filters */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 px-5 py-4 flex flex-wrap items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs font-medium text-slate-500 dark:text-zinc-400 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-slate-50 dark:bg-zinc-800 dark:text-zinc-100 border border-slate-200 dark:border-zinc-700 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 dark:text-zinc-400 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-slate-50 dark:bg-zinc-800 dark:text-zinc-100 border border-slate-200 dark:border-zinc-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
|
/>
|
|
</div>
|
|
{(startDate || endDate) && (
|
|
<button
|
|
onClick={clearDateFilters}
|
|
className="inline-flex items-center gap-1 px-2 py-1 text-xs text-slate-500 dark:text-zinc-400 hover:text-slate-700 dark:hover:text-zinc-200"
|
|
>
|
|
<X size={14} />
|
|
Limpiar
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Chart */}
|
|
{chartData.length > 1 && (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-slate-800 dark:text-zinc-100">
|
|
{"Consumo en el Tiempo"}
|
|
</h2>
|
|
<p className="text-xs text-slate-500 dark:text-zinc-400 mt-0.5">
|
|
{`${chartData.length} lecturas en el período`}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs text-slate-500 dark:text-zinc-400">
|
|
<span className="inline-block w-3 h-3 rounded-full bg-blue-500" />
|
|
{"Lectura (m³)"}
|
|
</div>
|
|
</div>
|
|
<div className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={chartData} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
|
|
<defs>
|
|
<linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
|
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.5} vertical={false} />
|
|
<XAxis
|
|
dataKey="date"
|
|
tick={{ fontSize: 11, fill: "#94a3b8" }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: "#e2e8f0" }}
|
|
dy={8}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 11, fill: "#94a3b8" }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
unit=" m³"
|
|
width={70}
|
|
domain={chartDomain}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "#1e293b",
|
|
border: "none",
|
|
borderRadius: "0.75rem",
|
|
color: "#f1f5f9",
|
|
fontSize: "0.875rem",
|
|
padding: "12px 16px",
|
|
boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
|
|
}}
|
|
formatter={(value: number | undefined) => [
|
|
`${(value ?? 0).toFixed(2)} m³`,
|
|
"Lectura",
|
|
]}
|
|
labelFormatter={(_label, payload) =>
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(payload as any)?.[0]?.payload?.fullDate || _label
|
|
}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke="#3b82f6"
|
|
strokeWidth={2.5}
|
|
fill="url(#colorValue)"
|
|
dot={{ r: 3, fill: "#3b82f6", stroke: "#fff", strokeWidth: 2 }}
|
|
activeDot={{ r: 6, stroke: "#3b82f6", strokeWidth: 2, fill: "#fff" }}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Table */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 overflow-hidden">
|
|
<div className="px-5 py-4 border-b border-slate-100 dark:border-zinc-800 flex items-center justify-between">
|
|
<span className="text-sm text-slate-500 dark:text-zinc-400">
|
|
<span className="font-semibold text-slate-700 dark:text-zinc-200">
|
|
{pagination.total}
|
|
</span>{" "}
|
|
lecturas encontradas
|
|
</span>
|
|
|
|
{pagination.totalPages > 1 && (
|
|
<div className="flex items-center gap-1 bg-slate-50 dark:bg-zinc-800 rounded-lg p-1">
|
|
<button
|
|
onClick={() => handlePageChange(pagination.page - 1)}
|
|
disabled={pagination.page === 1}
|
|
className="p-1.5 rounded-md hover:bg-white dark:hover:bg-zinc-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<ChevronLeft size={16} className="dark:text-zinc-300" />
|
|
</button>
|
|
<span className="px-2 text-xs font-medium dark:text-zinc-300">
|
|
{pagination.page} / {pagination.totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => handlePageChange(pagination.page + 1)}
|
|
disabled={pagination.page === pagination.totalPages}
|
|
className="p-1.5 rounded-md hover:bg-white dark:hover:bg-zinc-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<ChevronRight size={16} className="dark:text-zinc-300" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-slate-50/80 dark:bg-zinc-800">
|
|
<th className="px-5 py-3 text-left text-xs font-semibold text-slate-500 dark:text-zinc-400 uppercase tracking-wider">
|
|
Fecha / Hora
|
|
</th>
|
|
<th className="px-5 py-3 text-right text-xs font-semibold text-slate-500 dark:text-zinc-400 uppercase tracking-wider">
|
|
{"Lectura (m³)"}
|
|
</th>
|
|
<th className="px-5 py-3 text-center text-xs font-semibold text-slate-500 dark:text-zinc-400 uppercase tracking-wider">
|
|
Tipo
|
|
</th>
|
|
<th className="px-5 py-3 text-center text-xs font-semibold text-slate-500 dark:text-zinc-400 uppercase tracking-wider">
|
|
{"Batería"}
|
|
</th>
|
|
<th className="px-5 py-3 text-center text-xs font-semibold text-slate-500 dark:text-zinc-400 uppercase tracking-wider">
|
|
{"Señal"}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100 dark:divide-zinc-700">
|
|
{loadingReadings ? (
|
|
Array.from({ length: 8 }).map((_, i) => (
|
|
<tr key={i}>
|
|
{Array.from({ length: 5 }).map((_, j) => (
|
|
<td key={j} className="px-5 py-4">
|
|
<div className="h-4 bg-slate-100 dark:bg-zinc-700 rounded-md animate-pulse" />
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))
|
|
) : readings.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="px-5 py-16 text-center">
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-16 h-16 bg-slate-100 dark:bg-zinc-800 rounded-2xl flex items-center justify-center mb-4">
|
|
<Droplets size={32} className="text-slate-400" />
|
|
</div>
|
|
<p className="text-slate-600 dark:text-zinc-300 font-medium">
|
|
No hay lecturas disponibles
|
|
</p>
|
|
<p className="text-slate-400 dark:text-zinc-500 text-sm mt-1">
|
|
{startDate || endDate
|
|
? "Intenta ajustar el rango de fechas"
|
|
: "Este medidor aún no tiene lecturas registradas"}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
readings.map((reading, idx) => (
|
|
<tr
|
|
key={reading.id}
|
|
className={`group hover:bg-blue-50/40 dark:hover:bg-zinc-800 transition-colors ${
|
|
idx % 2 === 0
|
|
? "bg-white dark:bg-zinc-900"
|
|
: "bg-slate-50/30 dark:bg-zinc-800/50"
|
|
}`}
|
|
>
|
|
<td className="px-5 py-3.5">
|
|
<span className="text-sm text-slate-600 dark:text-zinc-300">
|
|
{formatDate(reading.receivedAt)}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-3.5 text-right">
|
|
<span className="text-sm font-semibold text-slate-800 dark:text-zinc-100 tabular-nums">
|
|
{Number(reading.readingValue).toFixed(2)}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-3.5 text-center">
|
|
<TypeBadge type={reading.readingType} />
|
|
</td>
|
|
<td className="px-5 py-3.5 text-center">
|
|
{reading.batteryLevel !== null ? (
|
|
<BatteryIndicator level={reading.batteryLevel} />
|
|
) : (
|
|
<span className="text-slate-400 dark:text-zinc-500">{"—"}</span>
|
|
)}
|
|
</td>
|
|
<td className="px-5 py-3.5 text-center">
|
|
{reading.signalStrength !== null ? (
|
|
<SignalIndicator strength={reading.signalStrength} />
|
|
) : (
|
|
<span className="text-slate-400 dark:text-zinc-500">{"—"}</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Footer pagination */}
|
|
{!loadingReadings && readings.length > 0 && (
|
|
<div className="px-5 py-4 border-t border-slate-100 dark:border-zinc-700 flex flex-wrap items-center justify-between gap-4">
|
|
<div className="text-sm text-slate-600 dark:text-zinc-300">
|
|
Mostrando{" "}
|
|
<span className="font-semibold text-slate-800 dark:text-zinc-200">
|
|
{(pagination.page - 1) * pagination.pageSize + 1}
|
|
</span>{" "}
|
|
a{" "}
|
|
<span className="font-semibold text-slate-800 dark:text-zinc-200">
|
|
{Math.min(pagination.page * pagination.pageSize, pagination.total)}
|
|
</span>{" "}
|
|
de{" "}
|
|
<span className="font-semibold text-slate-800 dark:text-zinc-200">
|
|
{pagination.total}
|
|
</span>{" "}
|
|
resultados
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-slate-600 dark:text-zinc-300">
|
|
{"Filas por página:"}
|
|
</span>
|
|
<select
|
|
value={pagination.pageSize}
|
|
onChange={(e) => handlePageSizeChange(Number(e.target.value))}
|
|
className="px-3 py-1.5 text-sm bg-white dark:bg-zinc-800 dark:text-zinc-100 border border-slate-200 dark:border-zinc-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
|
>
|
|
<option value={10}>10</option>
|
|
<option value={20}>20</option>
|
|
<option value={50}>50</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => handlePageChange(pagination.page - 1)}
|
|
disabled={pagination.page === 1}
|
|
className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-zinc-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<ChevronLeft size={18} className="text-slate-600 dark:text-zinc-400" />
|
|
</button>
|
|
|
|
<div className="flex items-center gap-1">
|
|
{Array.from({ length: pagination.totalPages }, (_, i) => i + 1)
|
|
.filter((pageNum) => {
|
|
if (pageNum === 1 || pageNum === pagination.totalPages) return true;
|
|
if (Math.abs(pageNum - pagination.page) <= 1) return true;
|
|
return false;
|
|
})
|
|
.map((pageNum, idx, arr) => {
|
|
const prevNum = arr[idx - 1];
|
|
const showEllipsis = prevNum && pageNum - prevNum > 1;
|
|
return (
|
|
<div key={pageNum} className="flex items-center">
|
|
{showEllipsis && (
|
|
<span className="px-2 text-slate-400 dark:text-zinc-500">
|
|
...
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={() => handlePageChange(pageNum)}
|
|
className={`min-w-[36px] px-3 py-1.5 text-sm rounded-lg transition-colors ${
|
|
pageNum === pagination.page
|
|
? "bg-blue-600 text-white font-semibold"
|
|
: "text-slate-600 dark:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-800"
|
|
}`}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handlePageChange(pagination.page + 1)}
|
|
disabled={pagination.page === pagination.totalPages}
|
|
className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-zinc-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<ChevronRight size={18} className="text-slate-600 dark:text-zinc-400" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoItem({
|
|
icon,
|
|
label,
|
|
value,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
}) {
|
|
return (
|
|
<div className="flex items-start gap-2">
|
|
<div className="mt-0.5 text-slate-400 dark:text-zinc-500">{icon}</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-500 dark:text-zinc-400 uppercase tracking-wide">
|
|
{label}
|
|
</p>
|
|
<p className="text-sm font-semibold text-slate-800 dark:text-zinc-100 mt-0.5">{value}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ConsumptionCard({
|
|
label,
|
|
sublabel,
|
|
value,
|
|
loading,
|
|
gradient,
|
|
}: {
|
|
label: string;
|
|
sublabel: string;
|
|
value: number | null;
|
|
loading: boolean;
|
|
gradient: string;
|
|
}) {
|
|
return (
|
|
<div className="relative bg-white dark:bg-zinc-900 rounded-2xl p-5 shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 overflow-hidden group hover:shadow-md transition-all">
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-slate-500 dark:text-zinc-400">{label}</p>
|
|
{loading ? (
|
|
<div className="h-8 w-24 bg-slate-100 dark:bg-zinc-700 rounded-lg animate-pulse" />
|
|
) : value !== null ? (
|
|
<p className="text-2xl font-bold text-slate-800 dark:text-white tabular-nums">
|
|
{value.toFixed(2)}
|
|
<span className="text-sm font-normal text-slate-400 dark:text-zinc-500 ml-1">{"m³"}</span>
|
|
</p>
|
|
) : (
|
|
<p className="text-2xl font-bold text-slate-400 dark:text-zinc-500">{"—"}</p>
|
|
)}
|
|
<p className="text-xs text-slate-400 dark:text-zinc-500">{sublabel}</p>
|
|
</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`}>
|
|
<Droplets size={22} />
|
|
</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 dark:text-zinc-500">{"—"}</span>;
|
|
|
|
const styles: Record<string, { bg: string; text: string; dot: string }> = {
|
|
AUTOMATIC: {
|
|
bg: "bg-emerald-50 dark:bg-emerald-900/30",
|
|
text: "text-emerald-700 dark:text-emerald-400",
|
|
dot: "bg-emerald-500",
|
|
},
|
|
MANUAL: {
|
|
bg: "bg-blue-50 dark:bg-blue-900/30",
|
|
text: "text-blue-700 dark:text-blue-400",
|
|
dot: "bg-blue-500",
|
|
},
|
|
SCHEDULED: {
|
|
bg: "bg-violet-50 dark:bg-violet-900/30",
|
|
text: "text-violet-700 dark:text-violet-400",
|
|
dot: "bg-violet-500",
|
|
},
|
|
};
|
|
|
|
const style = styles[type] || {
|
|
bg: "bg-slate-50 dark:bg-zinc-800",
|
|
text: "text-slate-700 dark:text-zinc-300",
|
|
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 }) {
|
|
const getColor = () => {
|
|
if (level > 50) return "bg-emerald-500";
|
|
if (level > 20) return "bg-amber-500";
|
|
return "bg-red-500";
|
|
};
|
|
|
|
return (
|
|
<div className="inline-flex items-center gap-1" title={`Batería: ${level}%`}>
|
|
<div className="w-6 h-3 border border-slate-300 dark:border-zinc-600 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 dark:text-zinc-400 font-medium">{level}%</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SignalIndicator({ strength }: { strength: number }) {
|
|
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="inline-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 dark:bg-zinc-600"
|
|
}`}
|
|
style={{ height: `${i * 2 + 4}px` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|