409 lines
14 KiB
TypeScript
409 lines
14 KiB
TypeScript
import { useState, useEffect, useMemo } from "react";
|
|
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
|
import MaterialTable from "@material-table/core";
|
|
import { fetchProjects, createConcentrator } from "./concentrators.api";
|
|
|
|
/* ================= TYPES ================= */
|
|
interface Concentrator {
|
|
"Area Name": string;
|
|
"Device S/N": string;
|
|
"Device Name": string;
|
|
"Device Time": string;
|
|
"Device Status": string;
|
|
"Operator": string;
|
|
"Installed Time": string;
|
|
"Communication Time": string;
|
|
"Instruction Manual": string;
|
|
}
|
|
|
|
interface User {
|
|
name: string;
|
|
role: "SUPER_ADMIN" | "USER";
|
|
project?: string; // asignado si no es superadmin
|
|
}
|
|
|
|
/* ================= COMPONENT ================= */
|
|
export default function ConcentratorsPage() {
|
|
// Simulación de usuario actual
|
|
const currentUser: User = {
|
|
name: "Admin GRH",
|
|
role: "SUPER_ADMIN", // cambiar a USER para probar otro caso
|
|
project: "CESPT",
|
|
};
|
|
|
|
const [allProjects, setAllProjects] = useState<string[]>([]);
|
|
const [loadingProjects, setLoadingProjects] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadProjects = async () => {
|
|
try {
|
|
const projects = await fetchProjects();
|
|
setAllProjects(projects);
|
|
} catch (error) {
|
|
console.error('Error loading projects:', error);
|
|
setAllProjects(["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"]);
|
|
} finally {
|
|
setLoadingProjects(false);
|
|
}
|
|
};
|
|
|
|
loadProjects();
|
|
}, []);
|
|
|
|
// Proyectos visibles según el usuario
|
|
const visibleProjects = useMemo(() =>
|
|
currentUser.role === "SUPER_ADMIN"
|
|
? allProjects
|
|
: currentUser.project
|
|
? [currentUser.project]
|
|
: [],
|
|
[allProjects, currentUser.role, currentUser.project]
|
|
);
|
|
|
|
const [selectedProject, setSelectedProject] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (visibleProjects.length > 0 && !selectedProject) {
|
|
setSelectedProject(visibleProjects[0]);
|
|
}
|
|
}, [visibleProjects, selectedProject]);
|
|
|
|
const [concentrators, setConcentrators] = useState<Concentrator[]>([
|
|
{
|
|
"Area Name": "GRH (PADRE)",
|
|
"Device S/N": "SN001",
|
|
"Device Name": "Concentrador A",
|
|
"Device Time": "2025-12-17T10:00:00Z",
|
|
"Device Status": "ACTIVE",
|
|
"Operator": "Operador 1",
|
|
"Installed Time": "2025-12-17",
|
|
"Communication Time": "2025-12-17T10:30:00Z",
|
|
"Instruction Manual": "Manual A",
|
|
},
|
|
{
|
|
"Area Name": "CESPT",
|
|
"Device S/N": "SN002",
|
|
"Device Name": "Concentrador B",
|
|
"Device Time": "2025-12-16T11:00:00Z",
|
|
"Device Status": "INACTIVE",
|
|
"Operator": "Operador 2",
|
|
"Installed Time": "2025-12-16",
|
|
"Communication Time": "2025-12-16T11:30:00Z",
|
|
"Instruction Manual": "Manual B",
|
|
},
|
|
{
|
|
"Area Name": "Proyecto A",
|
|
"Device S/N": "SN003",
|
|
"Device Name": "Concentrador C",
|
|
"Device Time": "2025-12-15T12:00:00Z",
|
|
"Device Status": "ACTIVE",
|
|
"Operator": "Operador 3",
|
|
"Installed Time": "2025-12-15",
|
|
"Communication Time": "2025-12-15T12:30:00Z",
|
|
"Instruction Manual": "Manual C",
|
|
},
|
|
]);
|
|
|
|
const [activeConcentrator, setActiveConcentrator] = useState<Concentrator | null>(null);
|
|
const [search, setSearch] = useState("");
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingSerial, setEditingSerial] = useState<string | null>(null);
|
|
|
|
const getEmptyConcentrator = (): Omit<Concentrator, "id"> => ({
|
|
"Area Name": selectedProject,
|
|
"Device S/N": "",
|
|
"Device Name": "",
|
|
"Device Time": new Date().toISOString(),
|
|
"Device Status": "ACTIVE",
|
|
"Operator": "",
|
|
"Installed Time": new Date().toISOString().slice(0, 10),
|
|
"Communication Time": new Date().toISOString(),
|
|
"Instruction Manual": "",
|
|
});
|
|
|
|
const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
|
|
|
|
/* ================= CRUD ================= */
|
|
const handleSave = async () => {
|
|
try {
|
|
if (editingSerial) {
|
|
setConcentrators((prev) =>
|
|
prev.map((c) =>
|
|
c["Device S/N"] === editingSerial ? { ...form } : c
|
|
)
|
|
);
|
|
} else {
|
|
await createConcentrator(form);
|
|
setConcentrators((prev) => [...prev, { ...form }]);
|
|
}
|
|
setShowModal(false);
|
|
setEditingSerial(null);
|
|
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
|
|
setActiveConcentrator(null);
|
|
} catch (error) {
|
|
console.error('Error saving concentrator:', error);
|
|
setConcentrators((prev) => [...prev, { ...form }]);
|
|
setShowModal(false);
|
|
setEditingSerial(null);
|
|
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
|
|
setActiveConcentrator(null);
|
|
}
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
if (!activeConcentrator) return;
|
|
setConcentrators((prev) =>
|
|
prev.filter((c) => c["Device S/N"] !== activeConcentrator["Device S/N"])
|
|
);
|
|
setActiveConcentrator(null);
|
|
};
|
|
|
|
/* ================= FILTER ================= */
|
|
const filtered = concentrators.filter(
|
|
(c) =>
|
|
(c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
|
|
c["Device S/N"].toLowerCase().includes(search.toLowerCase())) &&
|
|
c["Area Name"] === selectedProject
|
|
);
|
|
|
|
/* ================= UI ================= */
|
|
return (
|
|
<div className="flex gap-6 p-6 w-full bg-gray-100">
|
|
{/* LEFT INFO SIDEBAR */}
|
|
<div className="w-72 bg-white rounded-xl shadow p-4">
|
|
<h3 className="text-xs font-semibold text-gray-500 mb-3">
|
|
Project Information
|
|
</h3>
|
|
|
|
<select
|
|
value={selectedProject}
|
|
onChange={(e) => setSelectedProject(e.target.value)}
|
|
className="w-full border px-3 py-2 rounded"
|
|
disabled={loadingProjects}
|
|
>
|
|
{loadingProjects ? (
|
|
<option>Loading projects...</option>
|
|
) : (
|
|
visibleProjects.map((proj) => (
|
|
<option key={proj} value={proj}>
|
|
{proj}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
{/* MAIN */}
|
|
<div className="flex-1 flex flex-col gap-6">
|
|
{/* HEADER */}
|
|
<div
|
|
className="rounded-xl shadow p-6 text-white flex justify-between items-center"
|
|
style={{ background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)" }}
|
|
>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Concentrator Management</h1>
|
|
<p className="text-sm text-blue-100">Concentradores registrados</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => {
|
|
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
|
|
setEditingSerial(null);
|
|
setShowModal(true);
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"
|
|
>
|
|
<Plus size={16} /> Add
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
if (!activeConcentrator) return;
|
|
setEditingSerial(activeConcentrator["Device S/N"]);
|
|
setForm(activeConcentrator);
|
|
setShowModal(true);
|
|
}}
|
|
disabled={!activeConcentrator}
|
|
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
|
|
>
|
|
<Pencil size={16} /> Edit
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={!activeConcentrator}
|
|
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
|
|
>
|
|
<Trash2 size={16} /> Delete
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setConcentrators([...concentrators])}
|
|
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
|
|
>
|
|
<RefreshCcw size={16} /> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SEARCH */}
|
|
<input
|
|
className="bg-white rounded-lg shadow px-4 py-2 text-sm"
|
|
placeholder="Search concentrator..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
|
|
{/* TABLE */}
|
|
<MaterialTable
|
|
title="Concentrators"
|
|
columns={[
|
|
{ title: "Device Name", field: "Device Name" },
|
|
{ title: "Device S/N", field: "Device S/N" },
|
|
{
|
|
title: "Device Status",
|
|
field: "Device Status",
|
|
render: (rowData) => (
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-xs font-semibold border ${
|
|
rowData["Device Status"] === "ACTIVE"
|
|
? "text-blue-600 border-blue-600"
|
|
: "text-red-600 border-red-600"
|
|
}`}
|
|
>
|
|
{rowData["Device Status"]}
|
|
</span>
|
|
),
|
|
},
|
|
{ title: "Operator", field: "Operator" },
|
|
{ title: "Area Name", field: "Area Name" },
|
|
{ title: "Installed Time", field: "Installed Time", type: "date" },
|
|
]}
|
|
data={filtered}
|
|
onRowClick={(_, rowData) => setActiveConcentrator(rowData as Concentrator)}
|
|
options={{
|
|
actionsColumnIndex: -1,
|
|
search: false,
|
|
paging: true,
|
|
sorting: true,
|
|
rowStyle: (rowData) => ({
|
|
backgroundColor:
|
|
activeConcentrator?.["Device S/N"] === (rowData as Concentrator)["Device S/N"]
|
|
? "#EEF2FF"
|
|
: "#FFFFFF",
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 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">
|
|
<h2 className="text-lg font-semibold">
|
|
{editingSerial ? "Edit Concentrator" : "Add Concentrator"}
|
|
</h2>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Device Name</label>
|
|
<input
|
|
className="w-full border px-3 py-2 rounded"
|
|
placeholder="Enter device name"
|
|
value={form["Device Name"]}
|
|
onChange={(e) => setForm({ ...form, "Device Name": e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Device S/N</label>
|
|
<input
|
|
className="w-full border px-3 py-2 rounded"
|
|
placeholder="Enter device serial number"
|
|
value={form["Device S/N"]}
|
|
onChange={(e) => setForm({ ...form, "Device S/N": e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Operator</label>
|
|
<input
|
|
className="w-full border px-3 py-2 rounded"
|
|
placeholder="Enter operator name"
|
|
value={form["Operator"]}
|
|
onChange={(e) => setForm({ ...form, "Operator": e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Instruction Manual</label>
|
|
<input
|
|
className="w-full border px-3 py-2 rounded"
|
|
placeholder="Enter instruction manual"
|
|
value={form["Instruction Manual"]}
|
|
onChange={(e) => setForm({ ...form, "Instruction Manual": e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Device Status</label>
|
|
<button
|
|
onClick={() =>
|
|
setForm({
|
|
...form,
|
|
"Device Status": form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
|
|
})
|
|
}
|
|
className="w-full border rounded px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
Status: {form["Device Status"]}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Installed Time</label>
|
|
<input
|
|
type="date"
|
|
className="w-full border px-3 py-2 rounded"
|
|
value={form["Installed Time"]}
|
|
onChange={(e) => setForm({ ...form, "Installed Time": e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Device Time</label>
|
|
<input
|
|
type="datetime-local"
|
|
className="w-full border px-3 py-2 rounded"
|
|
value={form["Device Time"].slice(0, 16)}
|
|
onChange={(e) => setForm({ ...form, "Device Time": new Date(e.target.value).toISOString() })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">Communication Time</label>
|
|
<input
|
|
type="datetime-local"
|
|
className="w-full border px-3 py-2 rounded"
|
|
value={form["Communication Time"].slice(0, 16)}
|
|
onChange={(e) => setForm({ ...form, "Communication Time": new Date(e.target.value).toISOString() })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-3">
|
|
<button onClick={() => setShowModal(false)}>Cancel</button>
|
|
<button
|
|
onClick={handleSave}
|
|
className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|