Merge pull request #3 from luanngel/DevEsteban

Meters fix to show data in table component

src/api/meters.ts

@@ -10,20 +10,25 @@ const getAuthHeaders = () => ({
 export interface MeterRecord {
   id: string;
   fields: {
-    device_id: string;
+    CreatedAt: string;
-    meter_address: string;
+    UpdatedAt: string;
-    manufacturer_code: string;
+    "Area Name": string;
-    forward_cumulative_flow: number;
+    "Account Number": string | null;
-    reverse_cumulative_flow: number;
+    "User Name": string | null;
-    forward_instantaneous_flow: number;
+    "User Address": string | null;
-    water_temperature: number;
+    "Meter S/N": string;
-    voltage: number;
+    "Meter Name": string;
-    echo_amplitude: number;
+    "Meter Status": string;
-    ultrasonic_flight_time: number;
+    "Protocol Type": string;
-    timestamp: string;
+    "Price No.": string | null;
-    alarm_bytes: string;
+    "Price Name": string | null;
-    checksum_ok: boolean;
+    "DMA Partition": string | null;
-    received_at: string;
+    "Supply Types": string;
+    "Device ID": string;
+    "Device Name": string;
+    "Device Type": string;
+    "Usage Analysis Type": string;
+    "Installed Time": string;
   };
 }
 
@@ -37,20 +42,25 @@ export interface MetersResponse {
 
 export interface Meter {
   id: string;
+  createdAt: string;
+  updatedAt: string;
+  areaName: string;
+  accountNumber: string | null;
+  userName: string | null;
+  userAddress: string | null;
+  meterSerialNumber: string;
+  meterName: string;
+  meterStatus: string;
+  protocolType: string;
+  priceNo: string | null;
+  priceName: string | null;
+  dmaPartition: string | null;
+  supplyTypes: string;
   deviceId: string;
-  meterAddress: string;
+  deviceName: string;
-  manufacturerCode: string;
+  deviceType: string;
-  forwardCumulativeFlow: number;
+  usageAnalysisType: string;
-  reverseCumulativeFlow: number;
+  installedTime: string;
-  forwardInstantaneousFlow: number;
-  waterTemperature: number;
-  voltage: number;
-  echoAmplitude: number;
-  ultrasonicFlightTime: number;
-  timestamp: string;
-  alarmBytes: string;
-  checksumOk: boolean;
-  receivedAt: string;
 }
 
 export const fetchMeters = async (): Promise<Meter[]> => {
@@ -65,24 +75,31 @@ export const fetchMeters = async (): Promise<Meter[]> => {
     }
 
     const data: MetersResponse = await response.json();
-
+    const ans = data.records.map((r: MeterRecord) => ({
-    return data.records.map((r: MeterRecord) => ({
       id: r.id,
-      deviceId: r.fields.device_id || "",
+      createdAt: r.fields.CreatedAt || "",
-      meterAddress: r.fields.meter_address || "",
+      updatedAt: r.fields.UpdatedAt || "",
-      manufacturerCode: r.fields.manufacturer_code || "",
+      areaName: r.fields["Area Name"] || "",
-      forwardCumulativeFlow: r.fields.forward_cumulative_flow || 0,
+      accountNumber: r.fields["Account Number"] || null,
-      reverseCumulativeFlow: r.fields.reverse_cumulative_flow || 0,
+      userName: r.fields["User Name"] || null,
-      forwardInstantaneousFlow: r.fields.forward_instantaneous_flow || 0,
+      userAddress: r.fields["User Address"] || null,
-      waterTemperature: r.fields.water_temperature || 0,
+      meterSerialNumber: r.fields["Meter S/N"] || "",
-      voltage: r.fields.voltage || 0,
+      meterName: r.fields["Meter Name"] || "",
-      echoAmplitude: r.fields.echo_amplitude || 0,
+      meterStatus: r.fields["Meter Status"] || "",
-      ultrasonicFlightTime: r.fields.ultrasonic_flight_time || 0,
+      protocolType: r.fields["Protocol Type"] || "",
-      timestamp: r.fields.timestamp || "",
+      priceNo: r.fields["Price No."] || null,
-      alarmBytes: r.fields.alarm_bytes || "",
+      priceName: r.fields["Price Name"] || null,
-      checksumOk: r.fields.checksum_ok || false,
+      dmaPartition: r.fields["DMA Partition"] || null,
-      receivedAt: r.fields.received_at || "",
+      supplyTypes: r.fields["Supply Types"] || "",
+      deviceId: r.fields["Device ID"] || "",
+      deviceName: r.fields["Device Name"] || "",
+      deviceType: r.fields["Device Type"] || "",
+      usageAnalysisType: r.fields["Usage Analysis Type"] || "",
+      installedTime: r.fields["Installed Time"] || "",
     }));
+    console.log ("ans", ans);
+
+    return ans;
   } catch (error) {
     console.error("Error fetching meters:", error);
     throw error;
@@ -98,20 +115,25 @@ export const createMeter = async (
       headers: getAuthHeaders(),
       body: JSON.stringify({
         fields: {
-          device_id: meterData.deviceId,
+          CreatedAt: meterData.createdAt,
-          meter_address: meterData.meterAddress,
+          UpdatedAt: meterData.updatedAt,
-          manufacturer_code: meterData.manufacturerCode,
+          "Area Name": meterData.areaName,
-          forward_cumulative_flow: meterData.forwardCumulativeFlow,
+          "Account Number": meterData.accountNumber,
-          reverse_cumulative_flow: meterData.reverseCumulativeFlow,
+          "User Name": meterData.userName,
-          forward_instantaneous_flow: meterData.forwardInstantaneousFlow,
+          "User Address": meterData.userAddress,
-          water_temperature: meterData.waterTemperature,
+          "Meter S/N": meterData.meterSerialNumber,
-          voltage: meterData.voltage,
+          "Meter Name": meterData.meterName,
-          echo_amplitude: meterData.echoAmplitude,
+          "Meter Status": meterData.meterStatus,
-          ultrasonic_flight_time: meterData.ultrasonicFlightTime,
+          "Protocol Type": meterData.protocolType,
-          timestamp: meterData.timestamp,
+          "Price No.": meterData.priceNo,
-          alarm_bytes: meterData.alarmBytes,
+          "Price Name": meterData.priceName,
-          checksum_ok: meterData.checksumOk,
+          "DMA Partition": meterData.dmaPartition,
-          received_at: meterData.receivedAt,
+          "Supply Types": meterData.supplyTypes,
+          "Device ID": meterData.deviceId,
+          "Device Name": meterData.deviceName,
+          "Device Type": meterData.deviceType,
+          "Usage Analysis Type": meterData.usageAnalysisType,
+          "Installed Time": meterData.installedTime,
         },
       }),
     });
@@ -129,20 +151,25 @@ export const createMeter = async (
 
     return {
       id: createdRecord.id,
-      deviceId: createdRecord.fields.device_id || meterData.deviceId,
+      createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
-      meterAddress: createdRecord.fields.meter_address || meterData.meterAddress,
+      updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
-      manufacturerCode: createdRecord.fields.manufacturer_code || meterData.manufacturerCode,
+      areaName: createdRecord.fields["Area Name"] || meterData.areaName,
-      forwardCumulativeFlow: createdRecord.fields.forward_cumulative_flow || meterData.forwardCumulativeFlow,
+      accountNumber: createdRecord.fields["Account Number"] || meterData.accountNumber,
-      reverseCumulativeFlow: createdRecord.fields.reverse_cumulative_flow || meterData.reverseCumulativeFlow,
+      userName: createdRecord.fields["User Name"] || meterData.userName,
-      forwardInstantaneousFlow: createdRecord.fields.forward_instantaneous_flow || meterData.forwardInstantaneousFlow,
+      userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
-      waterTemperature: createdRecord.fields.water_temperature || meterData.waterTemperature,
+      meterSerialNumber: createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
-      voltage: createdRecord.fields.voltage || meterData.voltage,
+      meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
-      echoAmplitude: createdRecord.fields.echo_amplitude || meterData.echoAmplitude,
+      meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
-      ultrasonicFlightTime: createdRecord.fields.ultrasonic_flight_time || meterData.ultrasonicFlightTime,
+      protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
-      timestamp: createdRecord.fields.timestamp || meterData.timestamp,
+      priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
-      alarmBytes: createdRecord.fields.alarm_bytes || meterData.alarmBytes,
+      priceName: createdRecord.fields["Price Name"] || meterData.priceName,
-      checksumOk: createdRecord.fields.checksum_ok || meterData.checksumOk,
+      dmaPartition: createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
-      receivedAt: createdRecord.fields.received_at || meterData.receivedAt,
+      supplyTypes: createdRecord.fields["Supply Types"] || meterData.supplyTypes,
+      deviceId: createdRecord.fields["Device ID"] || meterData.deviceId,
+      deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
+      deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
+      usageAnalysisType: createdRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
+      installedTime: createdRecord.fields["Installed Time"] || meterData.installedTime,
     };
   } catch (error) {
     console.error("Error creating meter:", error);
@@ -161,20 +188,25 @@ export const updateMeter = async (
       body: JSON.stringify({
         id: id,
         fields: {
-          device_id: meterData.deviceId,
+          CreatedAt: meterData.createdAt,
-          meter_address: meterData.meterAddress,
+          UpdatedAt: meterData.updatedAt,
-          manufacturer_code: meterData.manufacturerCode,
+          "Area Name": meterData.areaName,
-          forward_cumulative_flow: meterData.forwardCumulativeFlow,
+          "Account Number": meterData.accountNumber,
-          reverse_cumulative_flow: meterData.reverseCumulativeFlow,
+          "User Name": meterData.userName,
-          forward_instantaneous_flow: meterData.forwardInstantaneousFlow,
+          "User Address": meterData.userAddress,
-          water_temperature: meterData.waterTemperature,
+          "Meter S/N": meterData.meterSerialNumber,
-          voltage: meterData.voltage,
+          "Meter Name": meterData.meterName,
-          echo_amplitude: meterData.echoAmplitude,
+          "Meter Status": meterData.meterStatus,
-          ultrasonic_flight_time: meterData.ultrasonicFlightTime,
+          "Protocol Type": meterData.protocolType,
-          timestamp: meterData.timestamp,
+          "Price No.": meterData.priceNo,
-          alarm_bytes: meterData.alarmBytes,
+          "Price Name": meterData.priceName,
-          checksum_ok: meterData.checksumOk,
+          "DMA Partition": meterData.dmaPartition,
-          received_at: meterData.receivedAt,
+          "Supply Types": meterData.supplyTypes,
+          "Device ID": meterData.deviceId,
+          "Device Name": meterData.deviceName,
+          "Device Type": meterData.deviceType,
+          "Usage Analysis Type": meterData.usageAnalysisType,
+          "Installed Time": meterData.installedTime,
         },
       }),
     });
@@ -196,20 +228,25 @@ export const updateMeter = async (
 
     return {
       id: updatedRecord.id,
-      deviceId: updatedRecord.fields.device_id || meterData.deviceId,
+      createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
-      meterAddress: updatedRecord.fields.meter_address || meterData.meterAddress,
+      updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
-      manufacturerCode: updatedRecord.fields.manufacturer_code || meterData.manufacturerCode,
+      areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
-      forwardCumulativeFlow: updatedRecord.fields.forward_cumulative_flow || meterData.forwardCumulativeFlow,
+      accountNumber: updatedRecord.fields["Account Number"] || meterData.accountNumber,
-      reverseCumulativeFlow: updatedRecord.fields.reverse_cumulative_flow || meterData.reverseCumulativeFlow,
+      userName: updatedRecord.fields["User Name"] || meterData.userName,
-      forwardInstantaneousFlow: updatedRecord.fields.forward_instantaneous_flow || meterData.forwardInstantaneousFlow,
+      userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
-      waterTemperature: updatedRecord.fields.water_temperature || meterData.waterTemperature,
+      meterSerialNumber: updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
-      voltage: updatedRecord.fields.voltage || meterData.voltage,
+      meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
-      echoAmplitude: updatedRecord.fields.echo_amplitude || meterData.echoAmplitude,
+      meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
-      ultrasonicFlightTime: updatedRecord.fields.ultrasonic_flight_time || meterData.ultrasonicFlightTime,
+      protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
-      timestamp: updatedRecord.fields.timestamp || meterData.timestamp,
+      priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
-      alarmBytes: updatedRecord.fields.alarm_bytes || meterData.alarmBytes,
+      priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
-      checksumOk: updatedRecord.fields.checksum_ok || meterData.checksumOk,
+      dmaPartition: updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
-      receivedAt: updatedRecord.fields.received_at || meterData.receivedAt,
+      supplyTypes: updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
+      deviceId: updatedRecord.fields["Device ID"] || meterData.deviceId,
+      deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
+      deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
+      usageAnalysisType: updatedRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
+      installedTime: updatedRecord.fields["Installed Time"] || meterData.installedTime,
     };
   } catch (error) {
     console.error("Error updating meter:", error);

src/pages/meters/MeterPage.tsx

@@ -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: "",
+    deviceName: "",
-    manufacturerCode: "",
+    deviceType: "",
-    forwardCumulativeFlow: 0,
+    usageAnalysisType: "",
-    reverseCumulativeFlow: 0,
+    installedTime: new Date().toISOString(),
-    forwardInstantaneousFlow: 0,
-    waterTemperature: 0,
-    voltage: 0,
-    echoAmplitude: 0,
-    ultrasonicFlightTime: 0,
-    timestamp: new Date().toISOString(),
-    alarmBytes: "",
-    checksumOk: true,
-    receivedAt: 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.meterName.toLowerCase().includes(search.toLowerCase()) ||
-        m.meterAddress.toLowerCase().includes(search.toLowerCase()) ||
+        m.meterSerialNumber.toLowerCase().includes(search.toLowerCase()) ||
-        m.manufacturerCode.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,
+                  deviceName: activeMeter.deviceName,
-                  manufacturerCode: activeMeter.manufacturerCode,
+                  deviceType: activeMeter.deviceType,
-                  forwardCumulativeFlow: activeMeter.forwardCumulativeFlow,
+                  usageAnalysisType: activeMeter.usageAnalysisType,
-                  reverseCumulativeFlow: activeMeter.reverseCumulativeFlow,
+                  installedTime: activeMeter.installedTime,
-                  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,
                 });
                 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: "Device Name", field: "deviceName" },
-            { title: "Manufacturer Code", field: "manufacturerCode" },
             {
-              title: "Forward Flow",
+              title: "Status",
-              field: "forwardCumulativeFlow",
+              field: "meterStatus",
-              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",
               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: "Protocol", field: "protocolType" },
-            { title: "Received At", field: "receivedAt", type: "datetime" },
+            { 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"
+                placeholder="Device Name"
-                value={form.meterAddress}
+                value={form.deviceName}
-                onChange={(e) => setForm({ ...form, meterAddress: e.target.value })}
+                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"
+                placeholder="Device Type"
-                value={form.manufacturerCode}
+                value={form.deviceType}
-                onChange={(e) => setForm({ ...form, manufacturerCode: e.target.value })}
+                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>
+              <label className="block text-sm font-medium text-gray-700">Meter Status</label>
-              <input
+              <select
-                type="number"
-                step="0.001"
                 className="w-full border px-3 py-2 rounded"
-                placeholder="0.000"
+                value={form.meterStatus}
-                value={form.forwardCumulativeFlow}
+                onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
-                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"
               >
-                Status: {form.checksumOk ? "OK" : "ERROR"}
+                <option value="Installed">Installed</option>
-              </button>
+                <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) : ""}
+                value={form.installedTime ? new Date(form.installedTime).toISOString().slice(0, 16) : ""}
-                onChange={(e) => setForm({ ...form, receivedAt: new Date(e.target.value).toISOString() })}
+                onChange={(e) => setForm({ ...form, installedTime: new Date(e.target.value).toISOString() })}
               />
             </div>
 

vite.config.ts

@@ -1,15 +1,17 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite"
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(),tailwindcss()],
+  plugins: [react(), tailwindcss()],
 
   server: {
-    host: '0.0.0.0',
+    allowedHosts: [
+      "localhost",
+      "127.0.0.1",
+      "reyna-compressive-shaunna.ngrok-free.dev",
+    ],
     port: 5173,
   },
-
+});
-})
-