Meters list and CRUD logic

src/api/meters.ts

@@ -0,0 +1,262 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+export const METERS_API_URL = `${API_BASE_URL}/api/v3/data/ppfu31vhv5gf6i0/mp1izvcpok5rk6s/records`;
+const API_TOKEN = import.meta.env.VITE_API_TOKEN;
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${API_TOKEN}`,
+  "Content-Type": "application/json",
+});
+
+export interface MeterRecord {
+  id: string;
+  fields: {
+    "Area Name": string;
+    "Account Number": string;
+    "User Name": string;
+    "User Address": string;
+    "Meter S/N": string;
+    "Meter Name": string;
+    "Meter Status": string;
+    "Protocol Type": string;
+    "Price No.": string;
+    "Price Name": string;
+    "DMA Partition": string;
+    "Supply Types": string;
+    "Device ID": string;
+    "Device Name": string;
+    "Device Type": string;
+    "Usage Analysis Type": string;
+    "Installed Time": string;
+  };
+}
+
+export interface MetersResponse {
+  records: MeterRecord[];
+  next?: string;
+  prev?: string;
+  nestedNext?: string;
+  nestedPrev?: string;
+}
+
+export interface Meter {
+  id: string;
+  areaName: string;
+  accountNumber: string;
+  userName: string;
+  userAddress: string;
+  meterSN: string;
+  meterName: string;
+  meterStatus: string;
+  protocolType: string;
+  priceNo: string;
+  priceName: string;
+  dmaPartition: string;
+  supplyTypes: string;
+  deviceID: string;
+  deviceName: string;
+  deviceType: string;
+  usageAnalysisType: string;
+  installedTime: string;
+}
+
+export const fetchMeters = async (): Promise<Meter[]> => {
+  try {
+    const response = await fetch(METERS_API_URL, {
+      method: "GET",
+      headers: getAuthHeaders(),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch meters");
+    }
+
+    const data: MetersResponse = await response.json();
+
+    return data.records.map((r: MeterRecord) => ({
+      id: r.id,
+      areaName: r.fields["Area Name"] || "",
+      accountNumber: r.fields["Account Number"] || "",
+      userName: r.fields["User Name"] || "",
+      userAddress: r.fields["User Address"] || "",
+      meterSN: r.fields["Meter S/N"] || "",
+      meterName: r.fields["Meter Name"] || "",
+      meterStatus: r.fields["Meter Status"] || "",
+      protocolType: r.fields["Protocol Type"] || "",
+      priceNo: r.fields["Price No."] || "",
+      priceName: r.fields["Price Name"] || "",
+      dmaPartition: r.fields["DMA Partition"] || "",
+      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"] || "",
+    }));
+  } catch (error) {
+    console.error("Error fetching meters:", error);
+    throw error;
+  }
+};
+
+export const createMeter = async (
+  meterData: Omit<Meter, "id">
+): Promise<Meter> => {
+  try {
+    const response = await fetch(METERS_API_URL, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      body: JSON.stringify({
+        fields: {
+          "Area Name": meterData.areaName,
+          "Account Number": meterData.accountNumber,
+          "User Name": meterData.userName,
+          "User Address": meterData.userAddress,
+          "Meter S/N": meterData.meterSN,
+          "Meter Name": meterData.meterName,
+          "Meter Status": meterData.meterStatus,
+          "Protocol Type": meterData.protocolType,
+          "Price No.": meterData.priceNo,
+          "Price Name": meterData.priceName,
+          "DMA Partition": meterData.dmaPartition,
+          "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,
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to create meter: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    const createdRecord = data.records?.[0];
+
+    if (!createdRecord) {
+      throw new Error("Invalid response format: no record returned");
+    }
+
+    return {
+      id: createdRecord.id,
+      areaName: createdRecord.fields["Area Name"] || meterData.areaName,
+      accountNumber: createdRecord.fields["Account Number"] || meterData.accountNumber,
+      userName: createdRecord.fields["User Name"] || meterData.userName,
+      userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
+      meterSN: createdRecord.fields["Meter S/N"] || meterData.meterSN,
+      meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
+      meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
+      protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
+      priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
+      priceName: createdRecord.fields["Price Name"] || meterData.priceName,
+      dmaPartition: createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
+      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);
+    throw error;
+  }
+};
+
+export const updateMeter = async (
+  id: string,
+  meterData: Omit<Meter, "id">
+): Promise<Meter> => {
+  try {
+    const response = await fetch(METERS_API_URL, {
+      method: "PATCH",
+      headers: getAuthHeaders(),
+      body: JSON.stringify({
+        id: id,
+        fields: {
+          "Area Name": meterData.areaName,
+          "Account Number": meterData.accountNumber,
+          "User Name": meterData.userName,
+          "User Address": meterData.userAddress,
+          "Meter S/N": meterData.meterSN,
+          "Meter Name": meterData.meterName,
+          "Meter Status": meterData.meterStatus,
+          "Protocol Type": meterData.protocolType,
+          "Price No.": meterData.priceNo,
+          "Price Name": meterData.priceName,
+          "DMA Partition": meterData.dmaPartition,
+          "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,
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      if (response.status === 400) {
+        const errorData = await response.json();
+        throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
+      }
+      throw new Error(`Failed to update meter: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    const updatedRecord = data.records?.[0];
+
+    if (!updatedRecord) {
+      throw new Error("Invalid response format: no record returned");
+    }
+
+    return {
+      id: updatedRecord.id,
+      areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
+      accountNumber: updatedRecord.fields["Account Number"] || meterData.accountNumber,
+      userName: updatedRecord.fields["User Name"] || meterData.userName,
+      userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
+      meterSN: updatedRecord.fields["Meter S/N"] || meterData.meterSN,
+      meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
+      meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
+      protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
+      priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
+      priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
+      dmaPartition: updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
+      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);
+    throw error;
+  }
+};
+
+export const deleteMeter = async (id: string): Promise<void> => {
+  try {
+    const response = await fetch(METERS_API_URL, {
+      method: "DELETE",
+      headers: getAuthHeaders(),
+      body: JSON.stringify({
+        id: id,
+      }),
+    });
+
+    if (!response.ok) {
+      if (response.status === 400) {
+        const errorData = await response.json();
+        throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
+      }
+      throw new Error(`Failed to delete meter: ${response.status} ${response.statusText}`);
+    }
+  } catch (error) {
+    console.error("Error deleting meter:", error);
+    throw error;
+  }
+};

src/pages/meters/MeterPage.tsx

@@ -1,15 +1,16 @@
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
+import { fetchProjectNames } from "../../api/projects";
+import {
+  fetchMeters,
+  createMeter,
+  updateMeter,
+  deleteMeter,
+  type Meter,
+} from "../../api/meters";
 
 /* ================= TYPES ================= */
-export interface Meter {
-  id: string; // recordId
-  serialNumber: string;
-  status: "ACTIVE" | "INACTIVE";
-  project: string;
-  createdAt: string;
-}
 
 interface User {
   name: string;
@@ -26,47 +27,45 @@ export default function MeterManagement() {
     project: "CESPT",
   };
 
-  // Lista de proyectos disponibles
+  const [allProjects, setAllProjects] = useState<string[]>([]);
-  const allProjects = ["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"];
+  const [loadingProjects, setLoadingProjects] = useState(true);
 
   // Proyectos visibles según el usuario
-  const visibleProjects =
+  const visibleProjects = useMemo(() =>
     currentUser.role === "SUPER_ADMIN"
       ? allProjects
       : currentUser.project
       ? [currentUser.project]
-      : [];
+      : [],
-
+    [allProjects, currentUser.role, currentUser.project]
-  const [selectedProject, setSelectedProject] = useState(
-    visibleProjects[0] || ""
   );
 
-  // Datos locales iniciales (simulan la API)
+  const [selectedProject, setSelectedProject] = useState("");
-  const initialMeters: Meter[] = [
-    {
-      id: "1",
-      serialNumber: "SN001",
-      status: "ACTIVE",
-      project: "GRH (PADRE)",
-      createdAt: "2025-12-17",
-    },
-    {
-      id: "2",
-      serialNumber: "SN002",
-      status: "INACTIVE",
-      project: "CESPT",
-      createdAt: "2025-12-16",
-    },
-    {
-      id: "3",
-      serialNumber: "SN003",
-      status: "ACTIVE",
-      project: "Proyecto A",
-      createdAt: "2025-12-15",
-    },
-  ];
 
-  const [meters, setMeters] = useState<Meter[]>(initialMeters);
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        const projects = await fetchProjectNames();
+        setAllProjects(projects);
+      } catch (error) {
+        console.error('Error loading projects:', error);
+        setAllProjects([]);
+      } finally {
+        setLoadingProjects(false);
+      }
+    };
+
+    loadProjects();
+  }, []);
+
+  useEffect(() => {
+    if (visibleProjects.length > 0 && !selectedProject) {
+      setSelectedProject(visibleProjects[0]);
+    }
+  }, [visibleProjects, selectedProject]);
+
+  const [meters, setMeters] = useState<Meter[]>([]);
+  const [loadingMeters, setLoadingMeters] = useState(true);
   const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
   const [search, setSearch] = useState("");
 
@@ -74,54 +73,111 @@ export default function MeterManagement() {
   const [editingId, setEditingId] = useState<string | null>(null);
 
   const emptyMeter: Omit<Meter, "id"> = {
-    serialNumber: "",
+    areaName: selectedProject,
-    status: "ACTIVE",
+    accountNumber: "",
-    project: selectedProject,
+    userName: "",
-    createdAt: new Date().toISOString().slice(0, 10),
+    userAddress: "",
+    meterSN: "",
+    meterName: "",
+    meterStatus: "ACTIVE",
+    protocolType: "",
+    priceNo: "",
+    priceName: "",
+    dmaPartition: "",
+    supplyTypes: "",
+    deviceID: "",
+    deviceName: "",
+    deviceType: "",
+    usageAnalysisType: "",
+    installedTime: new Date().toISOString().slice(0, 10),
   };
 
   const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
 
-  /* ================= CRUD LOCAL ================= */
+  const loadMeters = async () => {
-  const handleSave = () => {
+    setLoadingMeters(true);
-    if (editingId) {
+    try {
-      setMeters((prev) =>
+      const data = await fetchMeters();
-        prev.map((m) =>
+      setMeters(data);
-          m.id === editingId ? { ...m, ...form } : m
+    } catch (error) {
-        )
+      console.error("Error loading meters:", error);
-      );
+      setMeters([]);
-    } else {
+    } finally {
-      const newMeter: Meter = {
+      setLoadingMeters(false);
-        id: (Math.random() * 1000000).toFixed(0),
-        ...form,
-      };
-      setMeters((prev) => [...prev, newMeter]);
     }
-
-    setShowModal(false);
-    setEditingId(null);
-    setForm({ ...emptyMeter, project: selectedProject });
-    setActiveMeter(null);
   };
 
-  const handleDelete = () => {
+  useEffect(() => {
+    loadMeters();
+  }, []);
+
+  const handleSave = async () => {
+    try {
+      if (editingId) {
+        const meterToUpdate = meters.find(m => m.id === editingId);
+        if (!meterToUpdate) {
+          throw new Error("Meter to update not found");
+        }
+
+        const updatedMeter = await updateMeter(editingId, form);
+        setMeters((prev) =>
+          prev.map((m) =>
+            m.id === editingId ? updatedMeter : m
+          )
+        );
+      } else {
+        const newMeter = await createMeter(form);
+        setMeters((prev) => [...prev, newMeter]);
+      }
+      setShowModal(false);
+      setEditingId(null);
+      setForm({ ...emptyMeter, areaName: selectedProject });
+      setActiveMeter(null);
+    } catch (error) {
+      console.error('Error saving meter:', error);
+      alert(
+        `Error saving meter: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
+  };
+
+  const handleDelete = async () => {
     if (!activeMeter) return;
-    setMeters((prev) => prev.filter((m) => m.id !== activeMeter.id));
+
-    setActiveMeter(null);
+    const confirmDelete = window.confirm(
+      `Are you sure you want to delete the meter "${activeMeter.meterName}"?`
+    );
+
+    if (!confirmDelete) return;
+
+    try {
+      await deleteMeter(activeMeter.id);
+      setMeters((prev) => prev.filter((m) => m.id !== activeMeter.id));
+      setActiveMeter(null);
+    } catch (error) {
+      console.error("Error deleting meter:", error);
+      alert(
+        `Error deleting meter: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
   };
 
   const handleRefresh = () => {
-    // Simula recargar los datos originales
+    loadMeters();
-    setMeters(initialMeters);
     setActiveMeter(null);
   };
 
   /* ================= FILTER ================= */
   const filtered = meters.filter(
     (m) =>
-      (m.serialNumber.toLowerCase().includes(search.toLowerCase()) ||
+      (m.meterName.toLowerCase().includes(search.toLowerCase()) ||
-        m.project.toLowerCase().includes(search.toLowerCase())) &&
+        m.meterSN.toLowerCase().includes(search.toLowerCase()) ||
-      m.project === selectedProject
+        m.areaName.toLowerCase().includes(search.toLowerCase())) &&
+      m.areaName === selectedProject
   );
 
   /* ================= UI ================= */
@@ -137,13 +193,26 @@ export default function MeterManagement() {
           value={selectedProject}
           onChange={(e) => setSelectedProject(e.target.value)}
           className="w-full border px-3 py-2 rounded"
+          disabled={loadingProjects || visibleProjects.length === 0}
         >
-          {visibleProjects.map((proj) => (
+          {loadingProjects ? (
-            <option key={proj} value={proj}>
+            <option>Loading projects...</option>
-              {proj}
+          ) : visibleProjects.length === 0 ? (
-            </option>
+            <option>No projects available</option>
-          ))}
+          ) : (
+            visibleProjects.map((proj) => (
+              <option key={proj} value={proj}>
+                {proj}
+              </option>
+            ))
+          )}
         </select>
+
+        {visibleProjects.length === 0 && !loadingProjects && (
+          <p className="text-sm text-gray-500 mt-2">
+            No projects available. Please contact your administrator.
+          </p>
+        )}
       </div>
 
       {/* MAIN */}
@@ -164,11 +233,12 @@ export default function MeterManagement() {
           <div className="flex gap-3">
             <button
               onClick={() => {
-                setForm({ ...emptyMeter, project: selectedProject });
+                setForm({ ...emptyMeter, areaName: selectedProject });
                 setEditingId(null);
                 setShowModal(true);
               }}
-              className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"
+              disabled={!selectedProject || visibleProjects.length === 0}
+              className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <Plus size={16} /> Add
             </button>
@@ -177,7 +247,25 @@ export default function MeterManagement() {
               onClick={() => {
                 if (!activeMeter) return;
                 setEditingId(activeMeter.id);
-                setForm({ ...activeMeter });
+                setForm({
+                  areaName: activeMeter.areaName,
+                  accountNumber: activeMeter.accountNumber,
+                  userName: activeMeter.userName,
+                  userAddress: activeMeter.userAddress,
+                  meterSN: activeMeter.meterSN,
+                  meterName: activeMeter.meterName,
+                  meterStatus: activeMeter.meterStatus,
+                  protocolType: activeMeter.protocolType,
+                  priceNo: activeMeter.priceNo,
+                  priceName: activeMeter.priceName,
+                  dmaPartition: activeMeter.dmaPartition,
+                  supplyTypes: activeMeter.supplyTypes,
+                  deviceID: activeMeter.deviceID,
+                  deviceName: activeMeter.deviceName,
+                  deviceType: activeMeter.deviceType,
+                  usageAnalysisType: activeMeter.usageAnalysisType,
+                  installedTime: activeMeter.installedTime,
+                });
                 setShowModal(true);
               }}
               disabled={!activeMeter}
@@ -214,25 +302,31 @@ export default function MeterManagement() {
         {/* TABLE */}
         <MaterialTable
           title="Meters"
+          isLoading={loadingMeters}
           columns={[
-            { title: "Serial", field: "serialNumber" },
+            { title: "Meter Name", field: "meterName" },
+            { title: "Meter S/N", field: "meterSN" },
+            { title: "User Name", field: "userName" },
+            { title: "User Address", field: "userAddress" },
             {
-              title: "Status",
+              title: "Meter Status",
-              field: "status",
+              field: "meterStatus",
               render: (rowData) => (
                 <span
                   className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                    rowData.status === "ACTIVE"
+                    rowData.meterStatus === "ACTIVE"
                       ? "text-blue-600 border-blue-600"
                       : "text-red-600 border-red-600"
                   }`}
                 >
-                  {rowData.status}
+                  {rowData.meterStatus}
                 </span>
               ),
             },
-            { title: "Project", field: "project" },
+            { title: "Protocol Type", field: "protocolType" },
-            { title: "Created", field: "createdAt", type: "date" },
+            { title: "Device Name", field: "deviceName" },
+            { title: "Area Name", field: "areaName" },
+            { title: "Installed Time", field: "installedTime", type: "date" },
           ]}
           data={filtered}
           onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
@@ -248,55 +342,198 @@ export default function MeterManagement() {
                   : "#FFFFFF",
             }),
           }}
+          localization={{
+            body: {
+              emptyDataSourceMessage: loadingMeters
+                ? "Loading meters..."
+                : "No meters found. Click 'Add' to create your first meter.",
+            },
+          }}
         />
       </div>
 
       {/* MODAL */}
       {showModal && (
         <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
-          <div className="bg-white rounded-xl p-6 w-96 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">
               {editingId ? "Edit Meter" : "Add Meter"}
             </h2>
 
-            <input
+            <div className="space-y-1">
-              className="w-full border px-3 py-2 rounded"
+              <label className="block text-sm font-medium text-gray-700">Area Name</label>
-              placeholder="Serial Number"
+              <input
-              value={form.serialNumber}
+                className="w-full border px-3 py-2 rounded"
-              onChange={(e) =>
+                placeholder="Area Name"
-                setForm({ ...form, serialNumber: e.target.value })
+                value={form.areaName}
-              }
+                onChange={(e) => setForm({ ...form, areaName: e.target.value })}
-            />
+              />
+            </div>
 
-            <button
+            <div className="space-y-1">
-              onClick={() =>
+              <label className="block text-sm font-medium text-gray-700">Account Number</label>
-                setForm({
+              <input
-                  ...form,
+                className="w-full border px-3 py-2 rounded"
-                  status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE",
+                placeholder="Account Number"
-                })
+                value={form.accountNumber}
-              }
+                onChange={(e) => setForm({ ...form, accountNumber: e.target.value })}
-              className="w-full border rounded px-3 py-2"
+              />
-            >
+            </div>
-              Status: {form.status}
-            </button>
 
-            <input
+            <div className="space-y-1">
-              className="w-full border px-3 py-2 rounded"
+              <label className="block text-sm font-medium text-gray-700">User Name</label>
-              placeholder="Project"
+              <input
-              value={form.project}
+                className="w-full border px-3 py-2 rounded"
-              onChange={(e) =>
+                placeholder="User Name"
-                setForm({ ...form, project: e.target.value })
+                value={form.userName}
-              }
+                onChange={(e) => setForm({ ...form, userName: e.target.value })}
-            />
+              />
+            </div>
 
-            <input
+            <div className="space-y-1">
-              type="date"
+              <label className="block text-sm font-medium text-gray-700">User Address</label>
-              className="w-full border px-3 py-2 rounded"
+              <input
-              value={form.createdAt}
+                className="w-full border px-3 py-2 rounded"
-              onChange={(e) =>
+                placeholder="User Address"
-                setForm({ ...form, createdAt: e.target.value })
+                value={form.userAddress}
-              }
+                onChange={(e) => setForm({ ...form, userAddress: e.target.value })}
-            />
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Meter S/N</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Meter Serial Number"
+                value={form.meterSN}
+                onChange={(e) => setForm({ ...form, meterSN: e.target.value })}
+              />
+            </div>
+
+            <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 Status</label>
+              <button
+                onClick={() =>
+                  setForm({
+                    ...form,
+                    meterStatus: form.meterStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE",
+                  })
+                }
+                className="w-full border rounded px-3 py-2 hover:bg-gray-50"
+              >
+                Status: {form.meterStatus}
+              </button>
+            </div>
+
+            <div className="space-y-1">
+              <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">Price No.</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Price Number"
+                value={form.priceNo}
+                onChange={(e) => setForm({ ...form, priceNo: e.target.value })}
+              />
+            </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"
+                value={form.priceName}
+                onChange={(e) => setForm({ ...form, priceName: e.target.value })}
+              />
+            </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"
+                value={form.dmaPartition}
+                onChange={(e) => setForm({ ...form, dmaPartition: 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">Device ID</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Device ID"
+                value={form.deviceID}
+                onChange={(e) => setForm({ ...form, deviceID: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Device Name</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                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">Device Type</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                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">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">Installed Time</label>
+              <input
+                type="date"
+                className="w-full border px-3 py-2 rounded"
+                value={form.installedTime}
+                onChange={(e) => setForm({ ...form, installedTime: e.target.value })}
+              />
+            </div>
 
             <div className="flex justify-end gap-2 pt-3">
               <button onClick={() => setShowModal(false)}>Cancel</button>