Refactor meters: dividido en hook, sidebar, tabla y modal
This commit is contained in:
Marlene-Angel
File diff suppressed because it is too large
Load Diff
269
src/pages/meters/MetersModal.tsx
Normal file
269
src/pages/meters/MetersModal.tsx
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import type { Meter } from "../../api/meters";
|
||||||
|
import type { DeviceData } from "./MeterPage";
|
||||||
|
|
||||||
|
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>>;
|
||||||
|
|
||||||
|
errors: Record<string, boolean>;
|
||||||
|
setErrors: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
||||||
|
|
||||||
|
onClose: () => void;
|
||||||
|
onSave: () => void | Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function MetersModal({
|
||||||
|
editingId,
|
||||||
|
form,
|
||||||
|
setForm,
|
||||||
|
deviceForm,
|
||||||
|
setDeviceForm,
|
||||||
|
errors,
|
||||||
|
setErrors,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
}: Props) {
|
||||||
|
const title = editingId ? "Edit Meter" : "Add Meter";
|
||||||
|
|
||||||
|
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">
|
||||||
|
<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
|
||||||
|
</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 ${
|
||||||
|
errors["areaName"] ? "border-red-500" : ""
|
||||||
|
}`}
|
||||||
|
placeholder="Area Name *"
|
||||||
|
value={form.areaName}
|
||||||
|
onChange={(e) => {
|
||||||
|
setForm({ ...form, areaName: e.target.value });
|
||||||
|
if (errors["areaName"]) setErrors({ ...errors, areaName: 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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
<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 || "" })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<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" : ""
|
||||||
|
}`}
|
||||||
|
placeholder="Device Name *"
|
||||||
|
value={form.deviceName}
|
||||||
|
onChange={(e) => {
|
||||||
|
setForm({ ...form, deviceName: e.target.value });
|
||||||
|
if (errors["deviceName"]) setErrors({ ...errors, deviceName: false });
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{errors["deviceName"] && <p className="text-red-500 text-xs mt-1">This field is required</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 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>}
|
||||||
|
</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>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<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
|
||||||
|
/>
|
||||||
|
{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
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onSave}
|
||||||
|
className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
293
src/pages/meters/MetersSidebar.tsx
Normal file
293
src/pages/meters/MetersSidebar.tsx
Normal file
@@ -0,0 +1,293 @@
|
|||||||
|
// src/pages/meters/MetersSidebar.tsx
|
||||||
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { ChevronDown, RefreshCcw, Check } from "lucide-react";
|
||||||
|
import type React from "react";
|
||||||
|
import type { ProjectCard, TakeType } from "./MeterPage";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
loadingProjects: boolean;
|
||||||
|
|
||||||
|
takeType: TakeType;
|
||||||
|
setTakeType: (t: TakeType) => void;
|
||||||
|
|
||||||
|
selectedProject: string;
|
||||||
|
setSelectedProject: React.Dispatch<React.SetStateAction<string>>;
|
||||||
|
|
||||||
|
isMockMode: boolean;
|
||||||
|
projects: ProjectCard[];
|
||||||
|
|
||||||
|
onRefresh: () => void;
|
||||||
|
refreshDisabled?: boolean;
|
||||||
|
|
||||||
|
allProjects: string[];
|
||||||
|
onResetSelection?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TakeTypeOption = { key: TakeType; label: string };
|
||||||
|
|
||||||
|
const TAKE_TYPE_OPTIONS: TakeTypeOption[] = [
|
||||||
|
{ key: "GENERAL", label: "General" },
|
||||||
|
{ key: "LORA", label: "LoRa" },
|
||||||
|
{ key: "LORAWAN", label: "LoRaWAN" },
|
||||||
|
{ key: "GRANDES", label: "Grandes consumidores" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function MetersSidebar({
|
||||||
|
loadingProjects,
|
||||||
|
takeType,
|
||||||
|
setTakeType,
|
||||||
|
selectedProject,
|
||||||
|
setSelectedProject,
|
||||||
|
isMockMode,
|
||||||
|
projects,
|
||||||
|
onRefresh,
|
||||||
|
refreshDisabled,
|
||||||
|
allProjects,
|
||||||
|
onResetSelection,
|
||||||
|
}: Props) {
|
||||||
|
const [typesMenuOpen, setTypesMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
// para detectar click fuera (igual a tu implementación)
|
||||||
|
const menuRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onClickOutside = (e: MouseEvent) => {
|
||||||
|
if (!menuRef.current) return;
|
||||||
|
if (!menuRef.current.contains(e.target as Node)) {
|
||||||
|
setTypesMenuOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("mousedown", onClickOutside);
|
||||||
|
return () => document.removeEventListener("mousedown", onClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const takeTypeLabel = useMemo(
|
||||||
|
() => TAKE_TYPE_OPTIONS.find((o) => o.key === takeType)?.label ?? "General",
|
||||||
|
[takeType]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="w-[420px] shrink-0">
|
||||||
|
<div className="bg-white rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Proyectos</p>
|
||||||
|
<p className="text-xs text-gray-400">
|
||||||
|
Tipo: <span className="font-semibold">{takeTypeLabel}</span>
|
||||||
|
{" • "}
|
||||||
|
Seleccionado:{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{selectedProject || (isMockMode ? "— (modo demo)" : "—")}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow hover:bg-blue-700 transition disabled:opacity-60"
|
||||||
|
onClick={onRefresh}
|
||||||
|
disabled={loadingProjects || !!refreshDisabled}
|
||||||
|
title="Actualizar"
|
||||||
|
>
|
||||||
|
<RefreshCcw size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ✅ Tipos de tomas (dropdown) — mismo UI que Concentrators */}
|
||||||
|
<div className="mt-4 relative" ref={menuRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setTypesMenuOpen((v) => !v)}
|
||||||
|
disabled={loadingProjects}
|
||||||
|
className="w-full inline-flex items-center justify-between rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60"
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
Tipos de tomas
|
||||||
|
<span className="text-xs font-semibold text-gray-500">
|
||||||
|
({takeTypeLabel})
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<ChevronDown
|
||||||
|
size={16}
|
||||||
|
className={`${typesMenuOpen ? "rotate-180" : ""} transition`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{typesMenuOpen && (
|
||||||
|
<div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden">
|
||||||
|
{TAKE_TYPE_OPTIONS.map((opt) => {
|
||||||
|
const active = takeType === opt.key;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={opt.key}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTakeType(opt.key);
|
||||||
|
setTypesMenuOpen(false);
|
||||||
|
|
||||||
|
// Reset selection/search desde el parent
|
||||||
|
onResetSelection?.();
|
||||||
|
|
||||||
|
if (opt.key !== "GENERAL") {
|
||||||
|
// mock mode -> limpia selección real
|
||||||
|
setSelectedProject("");
|
||||||
|
} else {
|
||||||
|
// vuelve a GENERAL -> autoselecciona real si no hay
|
||||||
|
setSelectedProject((prev) => prev || allProjects[0] || "");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={[
|
||||||
|
"w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-50",
|
||||||
|
active ? "bg-blue-50/60" : "bg-white",
|
||||||
|
].join(" ")}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`font-semibold ${
|
||||||
|
active ? "text-blue-700" : "text-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{opt.label}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{active && <Check size={16} className="text-blue-700" />}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* List */}
|
||||||
|
<div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
|
||||||
|
{loadingProjects ? (
|
||||||
|
<div className="text-sm text-gray-500">Loading projects...</div>
|
||||||
|
) : projects.length === 0 ? (
|
||||||
|
<div className="text-sm text-gray-500 text-center py-10">
|
||||||
|
{isMockMode
|
||||||
|
? "No hay datos demo para este tipo."
|
||||||
|
: "No se encontraron proyectos."}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
projects.map((p) => {
|
||||||
|
const active = !isMockMode && p.name === selectedProject;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={p.name}
|
||||||
|
onClick={() => {
|
||||||
|
if (isMockMode) return;
|
||||||
|
setSelectedProject(p.name);
|
||||||
|
onResetSelection?.();
|
||||||
|
}}
|
||||||
|
className={[
|
||||||
|
"rounded-xl border p-4 transition cursor-pointer",
|
||||||
|
active
|
||||||
|
? "border-blue-600 bg-blue-50/40"
|
||||||
|
: "border-gray-200 bg-white hover:bg-gray-50",
|
||||||
|
isMockMode ? "opacity-90" : "",
|
||||||
|
].join(" ")}
|
||||||
|
title={
|
||||||
|
isMockMode
|
||||||
|
? "Modo demo: estas tarjetas son mocks"
|
||||||
|
: "Seleccionar proyecto"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-gray-800">
|
||||||
|
{p.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500">{p.region}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
className={[
|
||||||
|
"text-xs font-semibold px-2 py-1 rounded-full",
|
||||||
|
p.status === "ACTIVO"
|
||||||
|
? "bg-green-100 text-green-700"
|
||||||
|
: "bg-gray-200 text-gray-700",
|
||||||
|
].join(" ")}
|
||||||
|
>
|
||||||
|
{p.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 grid grid-cols-2 gap-2 text-xs">
|
||||||
|
<div className="flex justify-between gap-2">
|
||||||
|
<span className="text-gray-500">Subproyectos</span>
|
||||||
|
<span className="font-medium text-gray-800">
|
||||||
|
{p.projects}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between gap-2">
|
||||||
|
<span className="text-gray-500">Medidores</span>
|
||||||
|
<span className="font-medium text-gray-800">
|
||||||
|
{p.meters}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between gap-2">
|
||||||
|
<span className="text-gray-500">Alertas activas</span>
|
||||||
|
<span className="font-medium text-gray-800">
|
||||||
|
{p.activeAlerts}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between gap-2">
|
||||||
|
<span className="text-gray-500">Última sync</span>
|
||||||
|
<span className="font-medium text-gray-800">
|
||||||
|
{p.lastSync}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-2 flex justify-between gap-2">
|
||||||
|
<span className="text-gray-500">Responsable</span>
|
||||||
|
<span className="font-medium text-gray-800">
|
||||||
|
{p.contact}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 flex items-center justify-end gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={[
|
||||||
|
"rounded-lg px-3 py-2 text-sm font-semibold shadow transition",
|
||||||
|
active
|
||||||
|
? "bg-blue-600 text-white hover:bg-blue-700"
|
||||||
|
: "bg-gray-900 text-white hover:bg-gray-800",
|
||||||
|
isMockMode ? "opacity-50 cursor-not-allowed" : "",
|
||||||
|
].join(" ")}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (isMockMode) return;
|
||||||
|
setSelectedProject(p.name);
|
||||||
|
onResetSelection?.();
|
||||||
|
}}
|
||||||
|
disabled={isMockMode}
|
||||||
|
>
|
||||||
|
{isMockMode
|
||||||
|
? "Demo"
|
||||||
|
: active
|
||||||
|
? "Seleccionado"
|
||||||
|
: "Seleccionar"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-3 border-t text-xs text-gray-500">
|
||||||
|
Nota: region/alertas/última sync están en modo demostración hasta
|
||||||
|
integrar backend.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
src/pages/meters/MetersTable.tsx
Normal file
67
src/pages/meters/MetersTable.tsx
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import MaterialTable from "@material-table/core";
|
||||||
|
import type { Meter } from "../../api/meters";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
data: Meter[];
|
||||||
|
isLoading: boolean;
|
||||||
|
|
||||||
|
isMockMode: boolean;
|
||||||
|
selectedProject: string;
|
||||||
|
|
||||||
|
activeMeter: Meter | null;
|
||||||
|
onRowClick: (row: Meter) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function MetersTable({
|
||||||
|
data,
|
||||||
|
isLoading,
|
||||||
|
isMockMode,
|
||||||
|
selectedProject,
|
||||||
|
activeMeter,
|
||||||
|
onRowClick,
|
||||||
|
}: Props) {
|
||||||
|
const disabled = isMockMode || !selectedProject;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={disabled ? "opacity-60 pointer-events-none" : ""}>
|
||||||
|
<MaterialTable
|
||||||
|
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 || "-" },
|
||||||
|
]}
|
||||||
|
data={disabled ? [] : data}
|
||||||
|
onRowClick={(_, rowData) => onRowClick(rowData as Meter)}
|
||||||
|
options={{
|
||||||
|
actionsColumnIndex: -1,
|
||||||
|
search: false,
|
||||||
|
paging: true,
|
||||||
|
sorting: true,
|
||||||
|
rowStyle: (rowData) => ({
|
||||||
|
backgroundColor:
|
||||||
|
activeMeter?.id === (rowData as Meter).id ? "#EEF2FF" : "#FFFFFF",
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
localization={{
|
||||||
|
body: {
|
||||||
|
emptyDataSourceMessage: isMockMode
|
||||||
|
? "Modo demo: selecciona 'General' para ver datos reales."
|
||||||
|
: !selectedProject
|
||||||
|
? "Select a project to view meters."
|
||||||
|
: isLoading
|
||||||
|
? "Loading meters..."
|
||||||
|
: "No meters found. Click 'Add' to create your first meter.",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
94
src/pages/meters/useMeters.ts
Normal file
94
src/pages/meters/useMeters.ts
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { fetchMeters, type Meter } from "../../api/meters";
|
||||||
|
|
||||||
|
type UseMetersArgs = {
|
||||||
|
initialProject?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useMeters({ initialProject }: UseMetersArgs) {
|
||||||
|
const [allProjects, setAllProjects] = useState<string[]>([]);
|
||||||
|
const [loadingProjects, setLoadingProjects] = useState(true);
|
||||||
|
|
||||||
|
const [selectedProject, setSelectedProject] = useState(initialProject || "");
|
||||||
|
|
||||||
|
const [meters, setMeters] = useState<Meter[]>([]);
|
||||||
|
const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
|
||||||
|
const [loadingMeters, setLoadingMeters] = useState(true);
|
||||||
|
|
||||||
|
const loadMeters = async () => {
|
||||||
|
setLoadingMeters(true);
|
||||||
|
setLoadingProjects(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await fetchMeters();
|
||||||
|
|
||||||
|
const projectsArray = [...new Set(data.map((r) => r.areaName))]
|
||||||
|
.filter(Boolean) as string[];
|
||||||
|
|
||||||
|
setAllProjects(projectsArray);
|
||||||
|
setMeters(data);
|
||||||
|
|
||||||
|
setSelectedProject((prev) => {
|
||||||
|
if (prev) return prev;
|
||||||
|
if (initialProject) return initialProject;
|
||||||
|
return projectsArray[0] ?? "";
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading meters:", error);
|
||||||
|
setAllProjects([]);
|
||||||
|
setMeters([]);
|
||||||
|
setSelectedProject("");
|
||||||
|
} finally {
|
||||||
|
setLoadingMeters(false);
|
||||||
|
setLoadingProjects(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// init
|
||||||
|
useEffect(() => {
|
||||||
|
loadMeters();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// keep selectedProject synced if parent changes initialProject
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialProject) setSelectedProject(initialProject);
|
||||||
|
}, [initialProject]);
|
||||||
|
|
||||||
|
// filter by project
|
||||||
|
useEffect(() => {
|
||||||
|
if (!selectedProject) {
|
||||||
|
setFilteredMeters([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setFilteredMeters(meters.filter((m) => m.areaName === 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;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}, [meters]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
// loading
|
||||||
|
loadingProjects,
|
||||||
|
loadingMeters,
|
||||||
|
|
||||||
|
// projects
|
||||||
|
allProjects,
|
||||||
|
projectsCounts,
|
||||||
|
selectedProject,
|
||||||
|
setSelectedProject,
|
||||||
|
|
||||||
|
// data
|
||||||
|
meters,
|
||||||
|
setMeters,
|
||||||
|
filteredMeters,
|
||||||
|
|
||||||
|
// actions
|
||||||
|
loadMeters,
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user