diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx index 5b9b768..c76e839 100644 --- a/src/pages/concentrators/ConcentratorsPage.tsx +++ b/src/pages/concentrators/ConcentratorsPage.tsx @@ -1,16 +1,19 @@ import { useState, useEffect, useMemo } from "react"; import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react"; import MaterialTable from "@material-table/core"; -import { fetchProjects } from "./concentrators.api"; +import { fetchProjects, createConcentrator } from "./concentrators.api"; /* ================= TYPES ================= */ interface Concentrator { - id: number; - name: string; - location: string; - status: "ACTIVE" | "INACTIVE"; - project: string; - createdAt: string; + "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 { @@ -67,28 +70,37 @@ export default function ConcentratorsPage() { const [concentrators, setConcentrators] = useState([ { - id: 1, - name: "Concentrador A", - location: "Planta 1", - status: "ACTIVE", - project: "GRH (PADRE)", - createdAt: "2025-12-17", + "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", }, { - id: 2, - name: "Concentrador B", - location: "Planta 2", - status: "INACTIVE", - project: "CESPT", - createdAt: "2025-12-16", + "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", }, { - id: 3, - name: "Concentrador C", - location: "Planta 3", - status: "ACTIVE", - project: "Proyecto A", - createdAt: "2025-12-15", + "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", }, ]); @@ -96,40 +108,53 @@ export default function ConcentratorsPage() { const [search, setSearch] = useState(""); const [showModal, setShowModal] = useState(false); - const [editingId, setEditingId] = useState(null); + const [editingSerial, setEditingSerial] = useState(null); const getEmptyConcentrator = (): Omit => ({ - name: "", - location: "", - status: "ACTIVE", - project: selectedProject, - createdAt: new Date().toISOString().slice(0, 10), + "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>(getEmptyConcentrator()); /* ================= CRUD ================= */ - const handleSave = () => { - if (editingId) { - setConcentrators((prev) => - prev.map((c) => - c.id === editingId ? { id: editingId, ...form } : c - ) - ); - } else { - const newId = Date.now(); - setConcentrators((prev) => [...prev, { id: newId, ...form }]); + 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); } - setShowModal(false); - setEditingId(null); - setForm({ ...getEmptyConcentrator(), project: selectedProject }); - setActiveConcentrator(null); }; const handleDelete = () => { if (!activeConcentrator) return; setConcentrators((prev) => - prev.filter((c) => c.id !== activeConcentrator.id) + prev.filter((c) => c["Device S/N"] !== activeConcentrator["Device S/N"]) ); setActiveConcentrator(null); }; @@ -137,9 +162,9 @@ export default function ConcentratorsPage() { /* ================= FILTER ================= */ const filtered = concentrators.filter( (c) => - (c.name.toLowerCase().includes(search.toLowerCase()) || - c.location.toLowerCase().includes(search.toLowerCase())) && - c.project === selectedProject + (c["Device Name"].toLowerCase().includes(search.toLowerCase()) || + c["Device S/N"].toLowerCase().includes(search.toLowerCase())) && + c["Area Name"] === selectedProject ); /* ================= UI ================= */ @@ -184,8 +209,8 @@ export default function ConcentratorsPage() {
+
+ + setForm({ ...form, "Operator": e.target.value })} + /> +
- setForm({ ...form, createdAt: e.target.value })} - /> +
+ + setForm({ ...form, "Instruction Manual": e.target.value })} + /> +
+ +
+ + +
+ +
+ + setForm({ ...form, "Installed Time": e.target.value })} + /> +
+ +
+ + setForm({ ...form, "Device Time": new Date(e.target.value).toISOString() })} + /> +
+ +
+ + setForm({ ...form, "Communication Time": new Date(e.target.value).toISOString() })} + /> +
diff --git a/src/pages/concentrators/concentrators.api.ts b/src/pages/concentrators/concentrators.api.ts index 1652397..268ecba 100644 --- a/src/pages/concentrators/concentrators.api.ts +++ b/src/pages/concentrators/concentrators.api.ts @@ -22,6 +22,36 @@ interface ProjectsResponse { nestedPrev?: string; } +export const createConcentrator = async (concentratorData: { + "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; +}): Promise => { + try { + // const response = await fetch('/api/v3/data/ppfu31vhv5gf6i0/mqqvi3woqdw5ziq/records', { + // method: 'POST', + // headers: { + // 'Content-Type': 'application/json', + // }, + // body: JSON.stringify({ fields: concentratorData }), + // }); + // if (!response.ok) { + // throw new Error('Failed to create concentrator'); + // } + + console.log('Creating concentrator with data:', concentratorData); + } catch (error) { + console.error('Error creating concentrator:', error); + throw error; + } +}; + export const fetchProjects = async (): Promise => { try { // const response = await fetch('/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records');