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>
This commit is contained in:
Exteban08
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user