Se quitaron los labels de meter
This commit is contained in:
Marlene-Angel
@@ -358,198 +358,202 @@ export default function MeterManagement() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* MODAL */}
|
{/* MODAL */}
|
||||||
{showModal && (
|
{showModal && (
|
||||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||||
<div className="bg-white rounded-xl p-6 w-96 max-h-[80vh] overflow-y-auto space-y-3">
|
<div className="bg-white rounded-xl p-6 w-96 max-h-[80vh] overflow-y-auto space-y-3">
|
||||||
<h2 className="text-lg font-semibold">
|
<h2 className="text-lg font-semibold">
|
||||||
{editingId ? "Edit Meter" : "Add Meter"}
|
{editingId ? "Edit Meter" : "Add Meter"}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Meter Name</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Meter Name"
|
||||||
placeholder="Meter Name"
|
value={form.meterName}
|
||||||
value={form.meterName}
|
onChange={(e) => setForm({ ...form, meterName: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, meterName: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Meter Serial Number</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Meter Serial Number"
|
||||||
placeholder="Meter S/N"
|
value={form.meterSerialNumber}
|
||||||
value={form.meterSerialNumber}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, meterSerialNumber: e.target.value })}
|
setForm({ ...form, meterSerialNumber: e.target.value })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Area Name</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Area Name"
|
||||||
placeholder="Area Name"
|
value={form.areaName}
|
||||||
value={form.areaName}
|
onChange={(e) => setForm({ ...form, areaName: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, areaName: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Device ID</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Device ID"
|
||||||
placeholder="Device ID"
|
value={form.deviceId}
|
||||||
value={form.deviceId}
|
onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<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="Device Name"
|
value={form.deviceName}
|
||||||
value={form.deviceName}
|
onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Device Type</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Device Type"
|
||||||
placeholder="Device Type"
|
value={form.deviceType}
|
||||||
value={form.deviceType}
|
onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Meter Status</label>
|
<select
|
||||||
<select
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
value={form.meterStatus}
|
||||||
value={form.meterStatus}
|
onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
|
>
|
||||||
>
|
<option value="Installed">Meter Status: Installed</option>
|
||||||
<option value="Installed">Installed</option>
|
<option value="Uninstalled">Meter Status: Uninstalled</option>
|
||||||
<option value="Uninstalled">Uninstalled</option>
|
<option value="Maintenance">Meter Status: Maintenance</option>
|
||||||
<option value="Maintenance">Maintenance</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Protocol Type</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Protocol Type"
|
||||||
placeholder="Protocol Type"
|
value={form.protocolType}
|
||||||
value={form.protocolType}
|
onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Supply Types</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Supply Types"
|
||||||
placeholder="Supply Types"
|
value={form.supplyTypes}
|
||||||
value={form.supplyTypes}
|
onChange={(e) => setForm({ ...form, supplyTypes: e.target.value })}
|
||||||
onChange={(e) => setForm({ ...form, supplyTypes: e.target.value })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Usage Analysis Type</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Usage Analysis Type"
|
||||||
placeholder="Usage Analysis Type"
|
value={form.usageAnalysisType}
|
||||||
value={form.usageAnalysisType}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, usageAnalysisType: e.target.value })}
|
setForm({ ...form, usageAnalysisType: e.target.value })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Account Number</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Account Number (optional)"
|
||||||
placeholder="Account Number (optional)"
|
value={form.accountNumber ?? ""}
|
||||||
value={form.accountNumber || ""}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, accountNumber: e.target.value || null })}
|
setForm({ ...form, accountNumber: e.target.value || null })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">User Name</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="User Name (optional)"
|
||||||
placeholder="User Name (optional)"
|
value={form.userName ?? ""}
|
||||||
value={form.userName || ""}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, userName: e.target.value || null })}
|
setForm({ ...form, userName: e.target.value || null })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">User Address</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="User Address (optional)"
|
||||||
placeholder="User Address (optional)"
|
value={form.userAddress ?? ""}
|
||||||
value={form.userAddress || ""}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, userAddress: e.target.value || null })}
|
setForm({ ...form, userAddress: e.target.value || null })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Price No.</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Price No. (optional)"
|
||||||
placeholder="Price No. (optional)"
|
value={form.priceNo ?? ""}
|
||||||
value={form.priceNo || ""}
|
onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
|
||||||
onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Price Name</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="Price Name (optional)"
|
||||||
placeholder="Price Name (optional)"
|
value={form.priceName ?? ""}
|
||||||
value={form.priceName || ""}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, priceName: e.target.value || null })}
|
setForm({ ...form, priceName: e.target.value || null })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">DMA Partition</label>
|
<input
|
||||||
<input
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
placeholder="DMA Partition (optional)"
|
||||||
placeholder="DMA Partition (optional)"
|
value={form.dmaPartition ?? ""}
|
||||||
value={form.dmaPartition || ""}
|
onChange={(e) =>
|
||||||
onChange={(e) => setForm({ ...form, dmaPartition: e.target.value || null })}
|
setForm({ ...form, dmaPartition: e.target.value || null })
|
||||||
/>
|
}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Installed Time</label>
|
<input
|
||||||
<input
|
type="datetime-local"
|
||||||
type="datetime-local"
|
className="w-full border px-3 py-2 rounded"
|
||||||
className="w-full border px-3 py-2 rounded"
|
value={
|
||||||
value={form.installedTime ? new Date(form.installedTime).toISOString().slice(0, 16) : ""}
|
form.installedTime
|
||||||
onChange={(e) => setForm({ ...form, installedTime: new Date(e.target.value).toISOString() })}
|
? new Date(form.installedTime).toISOString().slice(0, 16)
|
||||||
/>
|
: ""
|
||||||
</div>
|
}
|
||||||
|
onChange={(e) =>
|
||||||
|
setForm({ ...form, installedTime: 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 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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user