Meters fix to show data in table component
This commit is contained in:
@@ -73,20 +73,25 @@ export default function MeterManagement() {
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
|
||||
const emptyMeter: Omit<Meter, "id"> = {
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
areaName: "",
|
||||
accountNumber: null,
|
||||
userName: null,
|
||||
userAddress: null,
|
||||
meterSerialNumber: "",
|
||||
meterName: "",
|
||||
meterStatus: "Installed",
|
||||
protocolType: "",
|
||||
priceNo: null,
|
||||
priceName: null,
|
||||
dmaPartition: null,
|
||||
supplyTypes: "",
|
||||
deviceId: "",
|
||||
meterAddress: "",
|
||||
manufacturerCode: "",
|
||||
forwardCumulativeFlow: 0,
|
||||
reverseCumulativeFlow: 0,
|
||||
forwardInstantaneousFlow: 0,
|
||||
waterTemperature: 0,
|
||||
voltage: 0,
|
||||
echoAmplitude: 0,
|
||||
ultrasonicFlightTime: 0,
|
||||
timestamp: new Date().toISOString(),
|
||||
alarmBytes: "",
|
||||
checksumOk: true,
|
||||
receivedAt: new Date().toISOString(),
|
||||
deviceName: "",
|
||||
deviceType: "",
|
||||
usageAnalysisType: "",
|
||||
installedTime: new Date().toISOString(),
|
||||
};
|
||||
|
||||
const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
|
||||
@@ -144,7 +149,7 @@ export default function MeterManagement() {
|
||||
if (!activeMeter) return;
|
||||
|
||||
const confirmDelete = window.confirm(
|
||||
`Are you sure you want to delete the meter "${activeMeter.deviceId}"?`
|
||||
`Are you sure you want to delete the meter "${activeMeter.meterName}" (${activeMeter.meterSerialNumber})?`
|
||||
);
|
||||
|
||||
if (!confirmDelete) return;
|
||||
@@ -171,9 +176,10 @@ export default function MeterManagement() {
|
||||
/* ================= FILTER ================= */
|
||||
const filtered = meters.filter(
|
||||
(m) =>
|
||||
(m.deviceId.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.meterAddress.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.manufacturerCode.toLowerCase().includes(search.toLowerCase()))
|
||||
(m.meterName.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.meterSerialNumber.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.deviceId.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.areaName.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
|
||||
/* ================= UI ================= */
|
||||
@@ -244,20 +250,25 @@ export default function MeterManagement() {
|
||||
if (!activeMeter) return;
|
||||
setEditingId(activeMeter.id);
|
||||
setForm({
|
||||
createdAt: activeMeter.createdAt,
|
||||
updatedAt: activeMeter.updatedAt,
|
||||
areaName: activeMeter.areaName,
|
||||
accountNumber: activeMeter.accountNumber,
|
||||
userName: activeMeter.userName,
|
||||
userAddress: activeMeter.userAddress,
|
||||
meterSerialNumber: activeMeter.meterSerialNumber,
|
||||
meterName: activeMeter.meterName,
|
||||
meterStatus: activeMeter.meterStatus,
|
||||
protocolType: activeMeter.protocolType,
|
||||
priceNo: activeMeter.priceNo,
|
||||
priceName: activeMeter.priceName,
|
||||
dmaPartition: activeMeter.dmaPartition,
|
||||
supplyTypes: activeMeter.supplyTypes,
|
||||
deviceId: activeMeter.deviceId,
|
||||
meterAddress: activeMeter.meterAddress,
|
||||
manufacturerCode: activeMeter.manufacturerCode,
|
||||
forwardCumulativeFlow: activeMeter.forwardCumulativeFlow,
|
||||
reverseCumulativeFlow: activeMeter.reverseCumulativeFlow,
|
||||
forwardInstantaneousFlow: activeMeter.forwardInstantaneousFlow,
|
||||
waterTemperature: activeMeter.waterTemperature,
|
||||
voltage: activeMeter.voltage,
|
||||
echoAmplitude: activeMeter.echoAmplitude,
|
||||
ultrasonicFlightTime: activeMeter.ultrasonicFlightTime,
|
||||
timestamp: activeMeter.timestamp,
|
||||
alarmBytes: activeMeter.alarmBytes,
|
||||
checksumOk: activeMeter.checksumOk,
|
||||
receivedAt: activeMeter.receivedAt,
|
||||
deviceName: activeMeter.deviceName,
|
||||
deviceType: activeMeter.deviceType,
|
||||
usageAnalysisType: activeMeter.usageAnalysisType,
|
||||
installedTime: activeMeter.installedTime,
|
||||
});
|
||||
setShowModal(true);
|
||||
}}
|
||||
@@ -287,7 +298,7 @@ export default function MeterManagement() {
|
||||
{/* SEARCH */}
|
||||
<input
|
||||
className="bg-white rounded-lg shadow px-4 py-2 text-sm"
|
||||
placeholder="Search meter..."
|
||||
placeholder="Search by meter name, serial number, device ID, or area..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
@@ -297,41 +308,30 @@ export default function MeterManagement() {
|
||||
title="Meters"
|
||||
isLoading={loadingMeters}
|
||||
columns={[
|
||||
{ title: "Meter Name", field: "meterName" },
|
||||
{ title: "Serial Number", field: "meterSerialNumber" },
|
||||
{ title: "Area", field: "areaName" },
|
||||
{ title: "Device ID", field: "deviceId" },
|
||||
{ title: "Meter Address", field: "meterAddress" },
|
||||
{ title: "Manufacturer Code", field: "manufacturerCode" },
|
||||
{ title: "Device Name", field: "deviceName" },
|
||||
{
|
||||
title: "Forward Flow",
|
||||
field: "forwardCumulativeFlow",
|
||||
render: (rowData) => `${rowData.forwardCumulativeFlow?.toFixed(3) || 0} m³`
|
||||
},
|
||||
{
|
||||
title: "Water Temp",
|
||||
field: "waterTemperature",
|
||||
render: (rowData) => `${rowData.waterTemperature?.toFixed(1) || 0}°C`
|
||||
},
|
||||
{
|
||||
title: "Voltage",
|
||||
field: "voltage",
|
||||
render: (rowData) => `${rowData.voltage || 0}V`
|
||||
},
|
||||
{
|
||||
title: "Checksum OK",
|
||||
field: "checksumOk",
|
||||
title: "Status",
|
||||
field: "meterStatus",
|
||||
render: (rowData) => (
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-semibold border ${
|
||||
rowData.checksumOk
|
||||
rowData.meterStatus === "Installed"
|
||||
? "text-green-600 border-green-600"
|
||||
: "text-red-600 border-red-600"
|
||||
: "text-gray-600 border-gray-600"
|
||||
}`}
|
||||
>
|
||||
{rowData.checksumOk ? "OK" : "ERROR"}
|
||||
{rowData.meterStatus}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ title: "Timestamp", field: "timestamp", type: "datetime" },
|
||||
{ title: "Received At", field: "receivedAt", type: "datetime" },
|
||||
{ title: "Protocol", field: "protocolType" },
|
||||
{ title: "Device Type", field: "deviceType" },
|
||||
{ title: "Created At", field: "createdAt", type: "datetime" },
|
||||
{ title: "Updated At", field: "updatedAt", type: "datetime" },
|
||||
]}
|
||||
data={filtered}
|
||||
onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
|
||||
@@ -365,6 +365,36 @@ export default function MeterManagement() {
|
||||
{editingId ? "Edit Meter" : "Add Meter"}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Meter Name</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Meter Name"
|
||||
value={form.meterName}
|
||||
onChange={(e) => setForm({ ...form, meterName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Meter Serial Number</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Meter S/N"
|
||||
value={form.meterSerialNumber}
|
||||
onChange={(e) => setForm({ ...form, meterSerialNumber: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Area Name</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Area Name"
|
||||
value={form.areaName}
|
||||
onChange={(e) => setForm({ ...form, areaName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Device ID</label>
|
||||
<input
|
||||
@@ -376,144 +406,135 @@ export default function MeterManagement() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Meter Address</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Device Name</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Meter Address"
|
||||
value={form.meterAddress}
|
||||
onChange={(e) => setForm({ ...form, meterAddress: e.target.value })}
|
||||
placeholder="Device Name"
|
||||
value={form.deviceName}
|
||||
onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Manufacturer Code</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Device Type</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Manufacturer Code"
|
||||
value={form.manufacturerCode}
|
||||
onChange={(e) => setForm({ ...form, manufacturerCode: e.target.value })}
|
||||
placeholder="Device Type"
|
||||
value={form.deviceType}
|
||||
onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Forward Cumulative Flow (m³)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
<label className="block text-sm font-medium text-gray-700">Meter Status</label>
|
||||
<select
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0.000"
|
||||
value={form.forwardCumulativeFlow}
|
||||
onChange={(e) => setForm({ ...form, forwardCumulativeFlow: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Reverse Cumulative Flow (m³)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0.000"
|
||||
value={form.reverseCumulativeFlow}
|
||||
onChange={(e) => setForm({ ...form, reverseCumulativeFlow: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Forward Instantaneous Flow</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0.000"
|
||||
value={form.forwardInstantaneousFlow}
|
||||
onChange={(e) => setForm({ ...form, forwardInstantaneousFlow: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Water Temperature (°C)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0.0"
|
||||
value={form.waterTemperature}
|
||||
onChange={(e) => setForm({ ...form, waterTemperature: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Voltage (V)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0.0"
|
||||
value={form.voltage}
|
||||
onChange={(e) => setForm({ ...form, voltage: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Echo Amplitude</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0"
|
||||
value={form.echoAmplitude}
|
||||
onChange={(e) => setForm({ ...form, echoAmplitude: parseInt(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Ultrasonic Flight Time</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="0"
|
||||
value={form.ultrasonicFlightTime}
|
||||
onChange={(e) => setForm({ ...form, ultrasonicFlightTime: parseInt(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Timestamp</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form.timestamp ? new Date(form.timestamp).toISOString().slice(0, 16) : ""}
|
||||
onChange={(e) => setForm({ ...form, timestamp: new Date(e.target.value).toISOString() })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Alarm Bytes</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Alarm Bytes"
|
||||
value={form.alarmBytes}
|
||||
onChange={(e) => setForm({ ...form, alarmBytes: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Checksum OK</label>
|
||||
<button
|
||||
onClick={() => setForm({ ...form, checksumOk: !form.checksumOk })}
|
||||
className="w-full border rounded px-3 py-2 hover:bg-gray-50"
|
||||
value={form.meterStatus}
|
||||
onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
|
||||
>
|
||||
Status: {form.checksumOk ? "OK" : "ERROR"}
|
||||
</button>
|
||||
<option value="Installed">Installed</option>
|
||||
<option value="Uninstalled">Uninstalled</option>
|
||||
<option value="Maintenance">Maintenance</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Received At</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Protocol Type</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Protocol Type"
|
||||
value={form.protocolType}
|
||||
onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Supply Types</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Supply Types"
|
||||
value={form.supplyTypes}
|
||||
onChange={(e) => setForm({ ...form, supplyTypes: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Usage Analysis Type</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Usage Analysis Type"
|
||||
value={form.usageAnalysisType}
|
||||
onChange={(e) => setForm({ ...form, usageAnalysisType: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Account Number</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Account Number (optional)"
|
||||
value={form.accountNumber || ""}
|
||||
onChange={(e) => setForm({ ...form, accountNumber: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">User Name</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="User Name (optional)"
|
||||
value={form.userName || ""}
|
||||
onChange={(e) => setForm({ ...form, userName: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">User Address</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="User Address (optional)"
|
||||
value={form.userAddress || ""}
|
||||
onChange={(e) => setForm({ ...form, userAddress: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Price No.</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Price No. (optional)"
|
||||
value={form.priceNo || ""}
|
||||
onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Price Name</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Price Name (optional)"
|
||||
value={form.priceName || ""}
|
||||
onChange={(e) => setForm({ ...form, priceName: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">DMA Partition</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="DMA Partition (optional)"
|
||||
value={form.dmaPartition || ""}
|
||||
onChange={(e) => setForm({ ...form, dmaPartition: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Installed Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form.receivedAt ? new Date(form.receivedAt).toISOString().slice(0, 16) : ""}
|
||||
onChange={(e) => setForm({ ...form, receivedAt: new Date(e.target.value).toISOString() })}
|
||||
value={form.installedTime ? new Date(form.installedTime).toISOString().slice(0, 16) : ""}
|
||||
onChange={(e) => setForm({ ...form, installedTime: new Date(e.target.value).toISOString() })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user