prueba columns

This commit is contained in:
2026-02-02 01:58:30 -06:00
parent 4f484779d8
commit e06941fd02
5 changed files with 278 additions and 48 deletions

View File

@@ -5,6 +5,7 @@ import { fetchConcentrators, type Concentrator } from "../../api/concentrators";
type Props = {
editingId: string | null;
selectedProject?: string;
form: MeterInput;
setForm: React.Dispatch<React.SetStateAction<MeterInput>>;
@@ -18,6 +19,7 @@ type Props = {
export default function MetersModal({
editingId,
selectedProject,
form,
setForm,
errors,
@@ -28,6 +30,7 @@ export default function MetersModal({
const title = editingId ? "Editar Medidor" : "Agregar Medidor";
const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
const [loadingConcentrators, setLoadingConcentrators] = useState(true);
const isPruebaProject = selectedProject === "PRUEBA";
// Load concentrators for the dropdown
useEffect(() => {
@@ -187,6 +190,145 @@ export default function MetersModal({
</div>
</div>
{isPruebaProject && (
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
Información Técnica (Proyecto PRUEBA)
</h3>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Protocol</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: LoRaWAN"
value={form.protocol ?? ""}
onChange={(e) => setForm({ ...form, protocol: e.target.value || undefined })}
/>
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Voltage (V)</label>
<input
type="number"
step="0.01"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: 3.6"
value={form.voltage ?? ""}
onChange={(e) => setForm({ ...form, voltage: e.target.value ? parseFloat(e.target.value) : undefined })}
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Signal (dBm)</label>
<input
type="number"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: -85"
value={form.signal ?? ""}
onChange={(e) => setForm({ ...form, signal: e.target.value ? parseInt(e.target.value) : undefined })}
/>
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Current Flow</label>
<input
type="number"
step="0.0001"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: 12.5"
value={form.currentFlow ?? ""}
onChange={(e) => setForm({ ...form, currentFlow: e.target.value ? parseFloat(e.target.value) : undefined })}
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Total Flow Reverse</label>
<input
type="number"
step="0.0001"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: 0.0"
value={form.totalFlowReverse ?? ""}
onChange={(e) => setForm({ ...form, totalFlowReverse: e.target.value ? parseFloat(e.target.value) : undefined })}
/>
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Leakage Status</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.leakageStatus ?? ""}
onChange={(e) => setForm({ ...form, leakageStatus: e.target.value || undefined })}
>
<option value="">Selecciona...</option>
<option value="OK">OK</option>
<option value="WARNING">Warning</option>
<option value="ALERT">Alert</option>
<option value="CRITICAL">Critical</option>
</select>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Burst Status</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.burstStatus ?? ""}
onChange={(e) => setForm({ ...form, burstStatus: e.target.value || undefined })}
>
<option value="">Selecciona...</option>
<option value="OK">OK</option>
<option value="WARNING">Warning</option>
<option value="ALERT">Alert</option>
<option value="CRITICAL">Critical</option>
</select>
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Manufacturer</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: Kamstrup"
value={form.manufacturer ?? ""}
onChange={(e) => setForm({ ...form, manufacturer: e.target.value || undefined })}
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Latitude</label>
<input
type="number"
step="0.00000001"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: 20.659698"
value={form.latitude ?? ""}
onChange={(e) => setForm({ ...form, latitude: e.target.value ? parseFloat(e.target.value) : undefined })}
/>
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Longitude</label>
<input
type="number"
step="0.00000001"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: -103.349609"
value={form.longitude ?? ""}
onChange={(e) => setForm({ ...form, longitude: e.target.value ? parseFloat(e.target.value) : undefined })}
/>
</div>
</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">