Meters project selection logic fix

src/api/meters.ts

@@ -64,10 +64,11 @@ export interface Meter {
 }
 
 export const fetchMeters = async (): Promise<Meter[]> => {
+  const pageSize = 9999;
   try {
-    const response = await fetch(METERS_API_URL, {
+    const response = await fetch(`${METERS_API_URL}?pageSize=${pageSize}`, {
       method: "GET",
-      headers: getAuthHeaders(),
+      headers: getAuthHeaders()
     });
 
     if (!response.ok) {
@@ -97,7 +98,6 @@ export const fetchMeters = async (): Promise<Meter[]> => {
       usageAnalysisType: r.fields["Usage Analysis Type"] || "",
       installedTime: r.fields["Installed Time"] || "",
     }));
-    console.log ("ans", ans);
 
     return ans;
   } catch (error) {
@@ -139,7 +139,9 @@ export const createMeter = async (
     });
 
     if (!response.ok) {
-      throw new Error(`Failed to create meter: ${response.status} ${response.statusText}`);
+      throw new Error(
+        `Failed to create meter: ${response.status} ${response.statusText}`
+      );
     }
 
     const data = await response.json();
@@ -154,22 +156,32 @@ export const createMeter = async (
       createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
       updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
       areaName: createdRecord.fields["Area Name"] || meterData.areaName,
-      accountNumber: createdRecord.fields["Account Number"] || meterData.accountNumber,
+      accountNumber:
+        createdRecord.fields["Account Number"] || meterData.accountNumber,
       userName: createdRecord.fields["User Name"] || meterData.userName,
-      userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
+      userAddress:
-      meterSerialNumber: createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
+        createdRecord.fields["User Address"] || meterData.userAddress,
+      meterSerialNumber:
+        createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
       meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
-      meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
+      meterStatus:
-      protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
+        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,
+      dmaPartition:
-      supplyTypes: createdRecord.fields["Supply Types"] || meterData.supplyTypes,
+        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,
+      usageAnalysisType:
-      installedTime: createdRecord.fields["Installed Time"] || meterData.installedTime,
+        createdRecord.fields["Usage Analysis Type"] ||
+        meterData.usageAnalysisType,
+      installedTime:
+        createdRecord.fields["Installed Time"] || meterData.installedTime,
     };
   } catch (error) {
     console.error("Error creating meter:", error);
@@ -214,9 +226,13 @@ export const updateMeter = async (
     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(
+          `Bad Request: ${errorData.msg || "Invalid data provided"}`
+        );
       }
-      throw new Error(`Failed to update meter: ${response.status} ${response.statusText}`);
+      throw new Error(
+        `Failed to update meter: ${response.status} ${response.statusText}`
+      );
     }
 
     const data = await response.json();
@@ -231,22 +247,32 @@ export const updateMeter = async (
       createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
       updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
       areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
-      accountNumber: updatedRecord.fields["Account Number"] || meterData.accountNumber,
+      accountNumber:
+        updatedRecord.fields["Account Number"] || meterData.accountNumber,
       userName: updatedRecord.fields["User Name"] || meterData.userName,
-      userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
+      userAddress:
-      meterSerialNumber: updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
+        updatedRecord.fields["User Address"] || meterData.userAddress,
+      meterSerialNumber:
+        updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
       meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
-      meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
+      meterStatus:
-      protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
+        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,
+      dmaPartition:
-      supplyTypes: updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
+        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,
+      usageAnalysisType:
-      installedTime: updatedRecord.fields["Installed Time"] || meterData.installedTime,
+        updatedRecord.fields["Usage Analysis Type"] ||
+        meterData.usageAnalysisType,
+      installedTime:
+        updatedRecord.fields["Installed Time"] || meterData.installedTime,
     };
   } catch (error) {
     console.error("Error updating meter:", error);
@@ -267,9 +293,13 @@ export const deleteMeter = async (id: string): Promise<void> => {
     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(
+          `Bad Request: ${errorData.msg || "Invalid data provided"}`
+        );
       }
-      throw new Error(`Failed to delete meter: ${response.status} ${response.statusText}`);
+      throw new Error(
+        `Failed to delete meter: ${response.status} ${response.statusText}`
+      );
     }
   } catch (error) {
     console.error("Error deleting meter:", error);

src/pages/concentrators/ConcentratorsPage.tsx

@@ -62,7 +62,7 @@ export default function ConcentratorsPage() {
     setLoadingConcentrators(true);
     try {
       const data = await fetchConcentrators();
-      const projectsArray = data.map((record) => record["Area Name"]);
+      const projectsArray = [...new Set(data.map((record) => record["Area Name"]))];
       setAllProjects(projectsArray);
       setConcentrators(data);
     } catch (error) {

src/pages/meters/MeterPage.tsx

@@ -1,7 +1,6 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
-import { fetchProjectNames } from "../../api/projects";
 import {
   fetchMeters,
   createMeter,
@@ -10,14 +9,6 @@ import {
   type Meter,
 } from "../../api/meters";
 
-/* ================= TYPES ================= */
-
-interface User {
-  name: string;
-  role: "SUPER_ADMIN" | "USER";
-  project?: string; // asignado si no es superadmin
-}
-
 interface DeviceData {
   "Device ID": number;
   "Device EUI": string;
@@ -28,51 +19,14 @@ interface DeviceData {
 
 /* ================= COMPONENT ================= */
 export default function MeterManagement() {
-  // Simulación de usuario actual
-  const currentUser: User = {
-    name: "Admin GRH",
-    role: "SUPER_ADMIN", // cambiar a USER para probar otro caso
-    project: "CESPT",
-  };
-
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [loadingProjects, setLoadingProjects] = useState(true);
 
-  // Proyectos visibles según el usuario
-  const visibleProjects = useMemo(() =>
-    currentUser.role === "SUPER_ADMIN"
-      ? allProjects
-      : currentUser.project
-      ? [currentUser.project]
-      : [],
-    [allProjects, currentUser.role, currentUser.project]
-  );
 
   const [selectedProject, setSelectedProject] = useState("");
 
-  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 [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
   const [loadingMeters, setLoadingMeters] = useState(true);
   const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
   const [search, setSearch] = useState("");
@@ -109,6 +63,15 @@ export default function MeterManagement() {
     "AppKey": "",
   };
 
+  useEffect(() => {
+    if (selectedProject) {
+      const filtered = meters.filter((meter) => meter.areaName === selectedProject);
+      setFilteredMeters(filtered);
+    } else {
+      setFilteredMeters(meters);
+    }
+  }, [selectedProject, meters]);
+
   const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
   const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
   const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
@@ -117,12 +80,16 @@ export default function MeterManagement() {
     setLoadingMeters(true);
     try {
       const data = await fetchMeters();
+      const projectsArray = [...new Set(data.map((record) => record["areaName"]))];
+      setAllProjects(projectsArray);
       setMeters(data);
     } catch (error) {
       console.error("Error loading meters:", error);
+      setAllProjects([]);
       setMeters([]);
     } finally {
       setLoadingMeters(false);
+      setLoadingProjects(false);
     }
   };
 
@@ -144,16 +111,14 @@ export default function MeterManagement() {
   const validateForm = (): boolean => {
     const newErrors: { [key: string]: boolean } = {};
 
+    // Required fields
     if (!form.meterName.trim()) newErrors["meterName"] = true;
     if (!form.meterSerialNumber.trim()) newErrors["meterSerialNumber"] = true;
     if (!form.areaName.trim()) newErrors["areaName"] = true;
     if (!form.deviceName.trim()) newErrors["deviceName"] = true;
-    if (!form.deviceType.trim()) newErrors["deviceType"] = true;
     if (!form.protocolType.trim()) newErrors["protocolType"] = true;
-    if (!form.supplyTypes.trim()) newErrors["supplyTypes"] = true;
-    if (!form.usageAnalysisType.trim()) newErrors["usageAnalysisType"] = true;
-    if (!form.installedTime) newErrors["installedTime"] = true;
 
+    // Device Configuration - Required
     if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) {
       newErrors["Device ID"] = true;
     }
@@ -248,15 +213,6 @@ export default function MeterManagement() {
     setActiveMeter(null);
   };
 
-  /* ================= FILTER ================= */
-  const filtered = meters.filter(
-    (m) =>
-      (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 ================= */
   return (
     <div className="flex gap-6 p-6 w-full bg-gray-100">
@@ -270,22 +226,25 @@ 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}
+          disabled={loadingProjects || allProjects.length === 0}
         >
           {loadingProjects ? (
             <option>Loading projects...</option>
-          ) : visibleProjects.length === 0 ? (
+          ) : meters.length === 0 ? (
             <option>No projects available</option>
           ) : (
-            visibleProjects.map((proj) => (
+            <>
+              <option value="">Select a project</option>
+              {allProjects.map((proj) => (
                 <option key={proj} value={proj}>
                   {proj}
                 </option>
-            ))
+              ))}
+            </>
           )}
         </select>
 
-        {visibleProjects.length === 0 && !loadingProjects && (
+        {allProjects.length === 0 && !loadingProjects && (
           <p className="text-sm text-gray-500 mt-2">
             No projects available. Please contact your administrator.
           </p>
@@ -316,7 +275,7 @@ export default function MeterManagement() {
                 setEditingId(null);
                 setShowModal(true);
               }}
-              disabled={!selectedProject || visibleProjects.length === 0}
+              disabled={!selectedProject || allProjects.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
@@ -387,32 +346,17 @@ export default function MeterManagement() {
           title="Meters"
           isLoading={loadingMeters}
           columns={[
-            { title: "Meter Name", field: "meterName" },
+            { title: "Area Name", field: "areaName", render: (rowData) => rowData.areaName || "-" },
-            { title: "Serial Number", field: "meterSerialNumber" },
+            { title: "Account Number", field: "accountNumber", render: (rowData) => rowData.accountNumber || "-" },
-            { title: "Area", field: "areaName" },
+            { title: "User Name", field: "userName", render: (rowData) => rowData.userName || "-" },
-            { title: "Device ID", field: "deviceId" },
+            { title: "User Address", field: "userAddress", render: (rowData) => rowData.userAddress || "-" },
-            { title: "Device Name", field: "deviceName" },
+            { title: "Meter S/N", field: "meterSerialNumber", render: (rowData) => rowData.meterSerialNumber || "-" },
-            {
+            { title: "Meter Name", field: "meterName", render: (rowData) => rowData.meterName || "-" },
-              title: "Status",
+            { title: "Protocol Type", field: "protocolType", render: (rowData) => rowData.protocolType || "-" },
-              field: "meterStatus",
+            { title: "Device ID", field: "deviceId", render: (rowData) => rowData.deviceId || "-" },
-              render: (rowData) => (
+            { title: "Device Name", field: "deviceName", render: (rowData) => rowData.deviceName || "-" },
-                <span
-                  className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                    rowData.meterStatus === "Installed"
-                      ? "text-green-600 border-green-600"
-                      : "text-gray-600 border-gray-600"
-                  }`}
-                >
-                  {rowData.meterStatus}
-                </span>
-              ),
-            },
-            { 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}
+          data={filteredMeters}
           onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
           options={{
             actionsColumnIndex: -1,
@@ -450,47 +394,6 @@ export default function MeterManagement() {
         </h3>
 
         <div className="grid grid-cols-2 gap-3">
-          <div>
-            <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["meterName"] ? "border-red-500" : ""
-              }`}
-              placeholder="Meter Name *"
-              value={form.meterName}
-              onChange={(e) => {
-                setForm({ ...form, meterName: e.target.value });
-                if (errors["meterName"]) {
-                  setErrors({ ...errors, "meterName": false });
-                }
-              }}
-              required
-            />
-            {errors["meterName"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
-          </div>
-
-          <div>
-            <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["meterSerialNumber"] ? "border-red-500" : ""
-              }`}
-              placeholder="Meter Serial Number *"
-              value={form.meterSerialNumber}
-              onChange={(e) => {
-                setForm({ ...form, meterSerialNumber: e.target.value });
-                if (errors["meterSerialNumber"]) {
-                  setErrors({ ...errors, "meterSerialNumber": false });
-                }
-              }}
-              required
-            />
-            {errors["meterSerialNumber"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
-          </div>
-        </div>
-
           <div>
             <input
               className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
@@ -511,23 +414,59 @@ export default function MeterManagement() {
             )}
           </div>
 
+          <div>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Account Number (optional)"
+              value={form.accountNumber ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, accountNumber: e.target.value || null })
+              }
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="User Name (optional)"
+              value={form.userName ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, userName: e.target.value || null })
+              }
+            />
+          </div>
+
+          <div>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="User Address (optional)"
+              value={form.userAddress ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, userAddress: e.target.value || null })
+              }
+            />
+          </div>
+        </div>
+
         <div className="grid grid-cols-2 gap-3">
           <div>
             <input
               className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["deviceName"] ? "border-red-500" : ""
+                errors["meterSerialNumber"] ? "border-red-500" : ""
               }`}
-              placeholder="Device Name *"
+              placeholder="Meter S/N *"
-              value={form.deviceName}
+              value={form.meterSerialNumber}
               onChange={(e) => {
-                setForm({ ...form, deviceName: e.target.value });
+                setForm({ ...form, meterSerialNumber: e.target.value });
-                if (errors["deviceName"]) {
+                if (errors["meterSerialNumber"]) {
-                  setErrors({ ...errors, "deviceName": false });
+                  setErrors({ ...errors, "meterSerialNumber": false });
                 }
               }}
               required
             />
-            {errors["deviceName"] && (
+            {errors["meterSerialNumber"] && (
               <p className="text-red-500 text-xs mt-1">This field is required</p>
             )}
           </div>
@@ -535,36 +474,24 @@ export default function MeterManagement() {
           <div>
             <input
               className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["deviceType"] ? "border-red-500" : ""
+                errors["meterName"] ? "border-red-500" : ""
               }`}
-              placeholder="Device Type *"
+              placeholder="Meter Name *"
-              value={form.deviceType}
+              value={form.meterName}
               onChange={(e) => {
-                setForm({ ...form, deviceType: e.target.value });
+                setForm({ ...form, meterName: e.target.value });
-                if (errors["deviceType"]) {
+                if (errors["meterName"]) {
-                  setErrors({ ...errors, "deviceType": false });
+                  setErrors({ ...errors, "meterName": false });
                 }
               }}
               required
             />
-            {errors["deviceType"] && (
+            {errors["meterName"] && (
               <p className="text-red-500 text-xs mt-1">This field is required</p>
             )}
           </div>
         </div>
 
-        <div>
-          <select
-            className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            value={form.meterStatus}
-            onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
-          >
-            <option value="Installed">Installed</option>
-            <option value="Uninstalled">Uninstalled</option>
-            <option value="Maintenance">Maintenance</option>
-          </select>
-        </div>
-
         <div className="grid grid-cols-2 gap-3">
           <div>
             <input
@@ -588,129 +515,35 @@ export default function MeterManagement() {
 
           <div>
             <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                errors["supplyTypes"] ? "border-red-500" : ""
+              placeholder="Device ID (optional)"
-              }`}
+              value={form.deviceId ?? ""}
-              placeholder="Supply Types *"
+              onChange={(e) =>
-              value={form.supplyTypes}
+                setForm({ ...form, deviceId: e.target.value || "" })
-              onChange={(e) => {
-                setForm({ ...form, supplyTypes: e.target.value });
-                if (errors["supplyTypes"]) {
-                  setErrors({ ...errors, "supplyTypes": false });
               }
-              }}
-              required
             />
-            {errors["supplyTypes"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
           </div>
         </div>
 
         <div>
           <input
             className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-              errors["usageAnalysisType"] ? "border-red-500" : ""
+              errors["deviceName"] ? "border-red-500" : ""
             }`}
-            placeholder="Usage Analysis Type *"
+            placeholder="Device Name *"
-            value={form.usageAnalysisType}
+            value={form.deviceName}
             onChange={(e) => {
-              setForm({ ...form, usageAnalysisType: e.target.value });
+              setForm({ ...form, deviceName: e.target.value });
-              if (errors["usageAnalysisType"]) {
+              if (errors["deviceName"]) {
-                setErrors({ ...errors, "usageAnalysisType": false });
+                setErrors({ ...errors, "deviceName": false });
               }
             }}
             required
           />
-          {errors["usageAnalysisType"] && (
+          {errors["deviceName"] && (
             <p className="text-red-500 text-xs mt-1">This field is required</p>
           )}
         </div>
-
-        <div>
-          <input
-            type="datetime-local"
-            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-              errors["installedTime"] ? "border-red-500" : ""
-            }`}
-            placeholder="Installed Time *"
-            value={
-              form.installedTime
-                ? new Date(form.installedTime).toISOString().slice(0, 16)
-                : ""
-            }
-            onChange={(e) => {
-              setForm({ ...form, installedTime: new Date(e.target.value).toISOString() });
-              if (errors["installedTime"]) {
-                setErrors({ ...errors, "installedTime": false });
-              }
-            }}
-            required
-          />
-          {errors["installedTime"] && (
-            <p className="text-red-500 text-xs mt-1">This field is required</p>
-          )}
-        </div>
-
-        <div className="pt-2 border-t">
-          <p className="text-xs text-gray-500 mb-2">Optional Fields</p>
-          
-          <div className="grid grid-cols-2 gap-3">
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Account Number (optional)"
-              value={form.accountNumber ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, accountNumber: e.target.value || null })
-              }
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="User Name (optional)"
-              value={form.userName ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, userName: e.target.value || null })
-              }
-            />
-          </div>
-
-          <input
-            className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent mt-3"
-            placeholder="User Address (optional)"
-            value={form.userAddress ?? ""}
-            onChange={(e) =>
-              setForm({ ...form, userAddress: e.target.value || null })
-            }
-          />
-
-          <div className="grid grid-cols-3 gap-3 mt-3">
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Price No. (optional)"
-              value={form.priceNo ?? ""}
-              onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Price Name (optional)"
-              value={form.priceName ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, priceName: e.target.value || null })
-              }
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="DMA Partition (optional)"
-              value={form.dmaPartition ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, dmaPartition: e.target.value || null })
-              }
-            />
-          </div>
-        </div>
       </div>
 
       <div className="space-y-3 pt-4">