consultoria-as/GRH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajustes UI en formulario de concentradores

Browse Source
This commit is contained in:
Marlene-Angel
2025-12-20 11:59:24 -08:00
parent b93a8d30b0
commit 9fc1ea3d96
1 changed files with 89 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/concentrators/ConcentratorsPage.tsx
View File

@@ -240,11 +240,18 @@ export default function ConcentratorsPage() {
</button> </button>
<button <button
onClick={() => setConcentrators([...concentrators])} onClick={() => {
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg" setSearch("");
> setActiveConcentrator(null);
<RefreshCcw size={16} /> Refresh setShowModal(false);
</button> setEditingSerial(null);
setForm(getEmptyConcentrator());
}}
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
>
<RefreshCcw size={16} /> Refresh
</button>
</div> </div>
</div> </div>
@@ -306,90 +313,90 @@ export default function ConcentratorsPage() {
{editingSerial ? "Edit Concentrator" : "Add Concentrator"} {editingSerial ? "Edit Concentrator" : "Add Concentrator"}
</h2> </h2>
<div className="space-y-1"> <div className="space-y-3">
<label className="block text-sm font-medium text-gray-700">Device Name</label> <input
<input className="w-full border px-3 py-2 rounded"
className="w-full border px-3 py-2 rounded" placeholder="Device Name"
placeholder="Enter device name" value={form["Device Name"]}
value={form["Device Name"]} onChange={(e) =>
onChange={(e) => setForm({ ...form, "Device Name": e.target.value })} setForm({ ...form, "Device Name": e.target.value })
/> }
</div> />
<div className="space-y-1"> <input
<label className="block text-sm font-medium text-gray-700">Device S/N</label> className="w-full border px-3 py-2 rounded"
<input placeholder="Device S/N"
className="w-full border px-3 py-2 rounded" value={form["Device S/N"]}
placeholder="Enter device serial number" onChange={(e) =>
value={form["Device S/N"]} setForm({ ...form, "Device S/N": e.target.value })
onChange={(e) => setForm({ ...form, "Device S/N": e.target.value })} }
/> />
</div>
<div className="space-y-1"> <input
<label className="block text-sm font-medium text-gray-700">Operator</label> className="w-full border px-3 py-2 rounded"
<input placeholder="Operator"
className="w-full border px-3 py-2 rounded" value={form["Operator"]}
placeholder="Enter operator name" onChange={(e) =>
value={form["Operator"]} setForm({ ...form, "Operator": e.target.value })
onChange={(e) => setForm({ ...form, "Operator": e.target.value })} }
/> />
</div>
<div className="space-y-1"> <input
<label className="block text-sm font-medium text-gray-700">Instruction Manual</label> className="w-full border px-3 py-2 rounded"
<input placeholder="Instruction Manual"
className="w-full border px-3 py-2 rounded" value={form["Instruction Manual"]}
placeholder="Enter instruction manual" onChange={(e) =>
value={form["Instruction Manual"]} setForm({ ...form, "Instruction Manual": e.target.value })
onChange={(e) => setForm({ ...form, "Instruction Manual": e.target.value })} }
/> />
</div>
<div className="space-y-1"> <button
<label className="block text-sm font-medium text-gray-700">Device Status</label> onClick={() =>
<button setForm({
onClick={() => ...form,
setForm({ "Device Status":
...form, form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
"Device Status": form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE", })
}) }
} className="w-full border rounded px-3 py-2 hover:bg-gray-50 text-left"
className="w-full border rounded px-3 py-2 hover:bg-gray-50" >
> Device Status: {form["Device Status"]}
Status: {form["Device Status"]} </button>
</button>
</div>
<div className="space-y-1"> <input
<label className="block text-sm font-medium text-gray-700">Installed Time</label> type="date"
<input className="w-full border px-3 py-2 rounded"
type="date" value={form["Installed Time"]}
className="w-full border px-3 py-2 rounded" onChange={(e) =>
value={form["Installed Time"]} setForm({ ...form, "Installed Time": e.target.value })
onChange={(e) => setForm({ ...form, "Installed Time": e.target.value })} }
/> />
</div>
<div className="space-y-1"> <input
<label className="block text-sm font-medium text-gray-700">Device Time</label> type="datetime-local"
<input className="w-full border px-3 py-2 rounded"
type="datetime-local" value={form["Device Time"].slice(0, 16)}
className="w-full border px-3 py-2 rounded" onChange={(e) =>
value={form["Device Time"].slice(0, 16)} setForm({
onChange={(e) => setForm({ ...form, "Device Time": new Date(e.target.value).toISOString() })} ...form,
/> "Device Time": new Date(e.target.value).toISOString(),
</div> })
}
/>
<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="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"> <div className="flex justify-end gap-2 pt-3">
<button onClick={() => setShowModal(false)}>Cancel</button> <button onClick={() => setShowModal(false)}>Cancel</button>