Resuelve conflictos al hacer merge con main

.env.example

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=domain_url
+VITE_API_TOKEN=api_token

.gitignore

@@ -12,6 +12,13 @@ dist
 dist-ssr
 *.local
 
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

src/api/concentrators.ts

@@ -0,0 +1,206 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+export const CONCENTRATORS_API_URL = `${API_BASE_URL}/api/v3/data/ppfu31vhv5gf6i0/mqqvi3woqdw5ziq/records`;
+const API_TOKEN = import.meta.env.VITE_API_TOKEN;
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${API_TOKEN}`,
+  "Content-Type": "application/json",
+});
+
+export interface ConcentratorRecord {
+  id: string;
+  fields: {
+    "Area Name": string;
+    "Device S/N": string;
+    "Device Name": string;
+    "Device Time": string;
+    "Device Status": string;
+    "Operator": string;
+    "Installed Time": string;
+    "Communication Time": string;
+    "Instruction Manual": string;
+  };
+}
+
+export interface ConcentratorsResponse {
+  records: ConcentratorRecord[];
+  next?: string;
+  prev?: string;
+  nestedNext?: string;
+  nestedPrev?: string;
+}
+
+export interface Concentrator {
+  id: string;
+  "Area Name": string;
+  "Device S/N": string;
+  "Device Name": string;
+  "Device Time": string;
+  "Device Status": string;
+  "Operator": string;
+  "Installed Time": string;
+  "Communication Time": string;
+  "Instruction Manual": string;
+}
+
+export const fetchConcentrators = async (): Promise<Concentrator[]> => {
+  try {
+    const response = await fetch(CONCENTRATORS_API_URL, {
+      method: "GET",
+      headers: getAuthHeaders(),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch concentrators");
+    }
+
+    const data: ConcentratorsResponse = await response.json();
+
+    return data.records.map((r: ConcentratorRecord) => ({
+      id: r.id,
+      "Area Name": r.fields["Area Name"] || "",
+      "Device S/N": r.fields["Device S/N"] || "",
+      "Device Name": r.fields["Device Name"] || "",
+      "Device Time": r.fields["Device Time"] || "",
+      "Device Status": r.fields["Device Status"] || "",
+      "Operator": r.fields["Operator"] || "",
+      "Installed Time": r.fields["Installed Time"] || "",
+      "Communication Time": r.fields["Communication Time"] || "",
+      "Instruction Manual": r.fields["Instruction Manual"] || "",
+    }));
+  } catch (error) {
+    console.error("Error fetching concentrators:", error);
+    throw error;
+  }
+};
+
+export const createConcentrator = async (
+  concentratorData: Omit<Concentrator, "id">
+): Promise<Concentrator> => {
+  try {
+    const response = await fetch(CONCENTRATORS_API_URL, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      body: JSON.stringify({
+        fields: {
+          "Area Name": concentratorData["Area Name"],
+          "Device S/N": concentratorData["Device S/N"],
+          "Device Name": concentratorData["Device Name"],
+          "Device Time": concentratorData["Device Time"],
+          "Device Status": concentratorData["Device Status"],
+          "Operator": concentratorData["Operator"],
+          "Installed Time": concentratorData["Installed Time"],
+          "Communication Time": concentratorData["Communication Time"],
+          "Instruction Manual": concentratorData["Instruction Manual"],
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to create concentrator: ${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,
+      "Area Name": createdRecord.fields["Area Name"] || concentratorData["Area Name"],
+      "Device S/N": createdRecord.fields["Device S/N"] || concentratorData["Device S/N"],
+      "Device Name": createdRecord.fields["Device Name"] || concentratorData["Device Name"],
+      "Device Time": createdRecord.fields["Device Time"] || concentratorData["Device Time"],
+      "Device Status": createdRecord.fields["Device Status"] || concentratorData["Device Status"],
+      "Operator": createdRecord.fields["Operator"] || concentratorData["Operator"],
+      "Installed Time": createdRecord.fields["Installed Time"] || concentratorData["Installed Time"],
+      "Communication Time": createdRecord.fields["Communication Time"] || concentratorData["Communication Time"],
+      "Instruction Manual": createdRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
+    };
+  } catch (error) {
+    console.error("Error creating concentrator:", error);
+    throw error;
+  }
+};
+
+export const updateConcentrator = async (
+  id: string,
+  concentratorData: Omit<Concentrator, "id">
+): Promise<Concentrator> => {
+  try {
+    const response = await fetch(CONCENTRATORS_API_URL, {
+      method: "PATCH",
+      headers: getAuthHeaders(),
+      body: JSON.stringify({
+        id: id,
+        fields: {
+          "Area Name": concentratorData["Area Name"],
+          "Device S/N": concentratorData["Device S/N"],
+          "Device Name": concentratorData["Device Name"],
+          "Device Time": concentratorData["Device Time"],
+          "Device Status": concentratorData["Device Status"],
+          "Operator": concentratorData["Operator"],
+          "Installed Time": concentratorData["Installed Time"],
+          "Communication Time": concentratorData["Communication Time"],
+          "Instruction Manual": concentratorData["Instruction Manual"],
+        },
+      }),
+    });
+
+    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 concentrator: ${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,
+      "Area Name": updatedRecord.fields["Area Name"] || concentratorData["Area Name"],
+      "Device S/N": updatedRecord.fields["Device S/N"] || concentratorData["Device S/N"],
+      "Device Name": updatedRecord.fields["Device Name"] || concentratorData["Device Name"],
+      "Device Time": updatedRecord.fields["Device Time"] || concentratorData["Device Time"],
+      "Device Status": updatedRecord.fields["Device Status"] || concentratorData["Device Status"],
+      "Operator": updatedRecord.fields["Operator"] || concentratorData["Operator"],
+      "Installed Time": updatedRecord.fields["Installed Time"] || concentratorData["Installed Time"],
+      "Communication Time": updatedRecord.fields["Communication Time"] || concentratorData["Communication Time"],
+      "Instruction Manual": updatedRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
+    };
+  } catch (error) {
+    console.error("Error updating concentrator:", error);
+    throw error;
+  }
+};
+
+export const deleteConcentrator = async (id: string): Promise<void> => {
+  try {
+    const response = await fetch(CONCENTRATORS_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 concentrator: ${response.status} ${response.statusText}`);
+    }
+  } catch (error) {
+    console.error("Error deleting concentrator:", error);
+    throw error;
+  }
+};

src/api/meters.ts

@@ -0,0 +1,278 @@
+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: {
+    CreatedAt: string;
+    UpdatedAt: string;
+    "Area Name": string;
+    "Account Number": string | null;
+    "User Name": string | null;
+    "User Address": string | null;
+    "Meter S/N": string;
+    "Meter Name": string;
+    "Meter Status": string;
+    "Protocol Type": string;
+    "Price No.": string | null;
+    "Price Name": string | null;
+    "DMA Partition": string | null;
+    "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;
+  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;
+  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();
+    const ans = data.records.map((r: MeterRecord) => ({
+      id: r.id,
+      createdAt: r.fields.CreatedAt || "",
+      updatedAt: r.fields.UpdatedAt || "",
+      areaName: r.fields["Area Name"] || "",
+      accountNumber: r.fields["Account Number"] || null,
+      userName: r.fields["User Name"] || null,
+      userAddress: r.fields["User Address"] || null,
+      meterSerialNumber: 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."] || null,
+      priceName: r.fields["Price Name"] || null,
+      dmaPartition: r.fields["DMA Partition"] || null,
+      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;
+  }
+};
+
+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: {
+          CreatedAt: meterData.createdAt,
+          UpdatedAt: meterData.updatedAt,
+          "Area Name": meterData.areaName,
+          "Account Number": meterData.accountNumber,
+          "User Name": meterData.userName,
+          "User Address": meterData.userAddress,
+          "Meter S/N": meterData.meterSerialNumber,
+          "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,
+      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,
+      userName: createdRecord.fields["User Name"] || meterData.userName,
+      userAddress: 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,
+      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: {
+          CreatedAt: meterData.createdAt,
+          UpdatedAt: meterData.updatedAt,
+          "Area Name": meterData.areaName,
+          "Account Number": meterData.accountNumber,
+          "User Name": meterData.userName,
+          "User Address": meterData.userAddress,
+          "Meter S/N": meterData.meterSerialNumber,
+          "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,
+      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,
+      userName: updatedRecord.fields["User Name"] || meterData.userName,
+      userAddress: 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,
+      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/api/projects.ts

@@ -0,0 +1,253 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+export const PROJECTS_API_URL = `${API_BASE_URL}/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records`;
+const API_TOKEN = import.meta.env.VITE_API_TOKEN;
+
+export const getAuthHeaders = () => ({
+  Authorization: `Bearer ${API_TOKEN}`,
+  "Content-Type": "application/json",
+});
+
+export interface ProjectRecord {
+  id: number;
+  fields: {
+    "Area name"?: string;
+    "Device S/N"?: string;
+    "Device Name"?: string;
+    "Device Type"?: string;
+    "Device Status"?: string;
+    Operator?: string;
+    "Installed Time"?: string;
+    "Communication Time"?: string;
+    "Instruction Manual"?: string | null;
+  };
+}
+
+export interface ProjectsResponse {
+  records: ProjectRecord[];
+  next?: string;
+  prev?: string;
+  nestedNext?: string;
+  nestedPrev?: string;
+}
+
+export interface Project {
+  id: string;
+  areaName: string;
+  deviceSN: string;
+  deviceName: string;
+  deviceType: string;
+  deviceStatus: "ACTIVE" | "INACTIVE";
+  operator: string;
+  installedTime: string;
+  communicationTime: string;
+  instructionManual: string;
+}
+
+export const fetchProjectNames = async (): Promise<string[]> => {
+  try {
+    const response = await fetch(PROJECTS_API_URL, {
+      method: "GET",
+      headers: getAuthHeaders(),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch projects");
+    }
+
+    const data: ProjectsResponse = await response.json();
+
+    if (!data.records || data.records.length === 0) {
+      console.warn("No project records found from API");
+      return [];
+    }
+
+    const projectNames = [
+      ...new Set(
+        data.records
+          .map((record) => record.fields["Area name"] || "")
+          .filter((name) => name)
+      ),
+    ];
+
+    return projectNames;
+  } catch (error) {
+    console.error("Error fetching project names:", error);
+    return [];
+  }
+};
+
+export const fetchProjects = async (): Promise<Project[]> => {
+  try {
+    const response = await fetch(PROJECTS_API_URL, {
+      method: "GET",
+      headers: getAuthHeaders(),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch projects");
+    }
+
+    const data: ProjectsResponse = await response.json();
+
+    return data.records.map((r: ProjectRecord) => ({
+      id: r.id.toString(),
+      areaName: r.fields["Area name"] ?? "",
+      deviceSN: r.fields["Device S/N"] ?? "",
+      deviceName: r.fields["Device Name"] ?? "",
+      deviceType: r.fields["Device Type"] ?? "",
+      deviceStatus:
+        r.fields["Device Status"] === "Installed" ? "ACTIVE" : "INACTIVE",
+      operator: r.fields["Operator"] ?? "",
+      installedTime: r.fields["Installed Time"] ?? "",
+      communicationTime: r.fields["Communication Time"] ?? "",
+      instructionManual: r.fields["Instruction Manual"] ?? "",
+    }));
+  } catch (error) {
+    console.error("Error fetching projects:", error);
+    throw error;
+  }
+};
+
+export const createProject = async (
+  projectData: Omit<Project, "id">
+): Promise<Project> => {
+  const response = await fetch(PROJECTS_API_URL, {
+    method: "POST",
+    headers: getAuthHeaders(),
+    body: JSON.stringify({
+      fields: {
+        "Area name": projectData.areaName,
+        "Device S/N": projectData.deviceSN,
+        "Device Name": projectData.deviceName,
+        "Device Type": projectData.deviceType,
+        "Device Status":
+          projectData.deviceStatus === "ACTIVE" ? "Installed" : "Inactive",
+        Operator: projectData.operator,
+        "Installed Time": projectData.installedTime,
+        "Communication Time": projectData.communicationTime,
+        "Instruction Manual": projectData.instructionManual,
+      },
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to create project: ${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.toString(),
+    areaName: createdRecord.fields["Area name"] ?? projectData.areaName,
+    deviceSN: createdRecord.fields["Device S/N"] ?? projectData.deviceSN,
+    deviceName: createdRecord.fields["Device Name"] ?? projectData.deviceName,
+    deviceType: createdRecord.fields["Device Type"] ?? projectData.deviceType,
+    deviceStatus:
+      createdRecord.fields["Device Status"] === "Installed"
+        ? "ACTIVE"
+        : "INACTIVE",
+    operator: createdRecord.fields["Operator"] ?? projectData.operator,
+    installedTime:
+      createdRecord.fields["Installed Time"] ?? projectData.installedTime,
+    communicationTime:
+      createdRecord.fields["Communication Time"] ??
+      projectData.communicationTime,
+    instructionManual:
+      createdRecord.fields["Instruction Manual"] ??
+      projectData.instructionManual,
+  };
+};
+
+export const updateProject = async (
+  id: string,
+  projectData: Omit<Project, "id">
+): Promise<Project> => {
+  const response = await fetch(PROJECTS_API_URL, {
+    method: "PATCH",
+    headers: getAuthHeaders(),
+    body: JSON.stringify({
+      id: parseInt(id),
+      fields: {
+        "Area name": projectData.areaName,
+        "Device S/N": projectData.deviceSN,
+        "Device Name": projectData.deviceName,
+        "Device Type": projectData.deviceType,
+        "Device Status":
+          projectData.deviceStatus === "ACTIVE" ? "Installed" : "Inactive",
+        Operator: projectData.operator,
+        "Installed Time": projectData.installedTime,
+        "Communication Time": projectData.communicationTime,
+        "Instruction Manual": projectData.instructionManual,
+      },
+    }),
+  });
+
+  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 project: ${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.toString(),
+    areaName: updatedRecord.fields["Area name"] ?? projectData.areaName,
+    deviceSN: updatedRecord.fields["Device S/N"] ?? projectData.deviceSN,
+    deviceName: updatedRecord.fields["Device Name"] ?? projectData.deviceName,
+    deviceType: updatedRecord.fields["Device Type"] ?? projectData.deviceType,
+    deviceStatus:
+      updatedRecord.fields["Device Status"] === "Installed"
+        ? "ACTIVE"
+        : "INACTIVE",
+    operator: updatedRecord.fields["Operator"] ?? projectData.operator,
+    installedTime:
+      updatedRecord.fields["Installed Time"] ?? projectData.installedTime,
+    communicationTime:
+      updatedRecord.fields["Communication Time"] ??
+      projectData.communicationTime,
+    instructionManual:
+      updatedRecord.fields["Instruction Manual"] ??
+      projectData.instructionManual,
+  };
+};
+
+export const deleteProject = async (id: string): Promise<void> => {
+  const response = await fetch(PROJECTS_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 project: ${response.status} ${response.statusText}`
+    );
+  }
+};

src/pages/concentrators/ConcentratorsPage.tsx

@@ -1,20 +1,16 @@
 import { useState, useEffect, useMemo } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
-import { fetchProjects, createConcentrator } from "./concentrators.api";
+import { fetchProjectNames } from "../../api/projects";
+import {
+  fetchConcentrators,
+  createConcentrator,
+  updateConcentrator,
+  deleteConcentrator,
+  type Concentrator,
+} from "../../api/concentrators";
 
 /* ================= TYPES ================= */
-interface Concentrator {
-  "Area Name": string;
-  "Device S/N": string;
-  "Device Name": string;
-  "Device Time": string;
-  "Device Status": string;
-  "Operator": string;
-  "Installed Time": string;
-  "Communication Time": string;
-  "Instruction Manual": string;
-}
 
 interface User {
   name: string;
@@ -33,15 +29,16 @@ export default function ConcentratorsPage() {
 
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [loadingProjects, setLoadingProjects] = useState(true);
+  const [loadingConcentrators, setLoadingConcentrators] = useState(true);
 
   useEffect(() => {
     const loadProjects = async () => {
       try {
-        const projects = await fetchProjects();
+        const projects = await fetchProjectNames();
         setAllProjects(projects);
       } catch (error) {
         console.error('Error loading projects:', error);
-        setAllProjects(["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"]);
+        setAllProjects([]);
       } finally {
         setLoadingProjects(false);
       }
@@ -61,6 +58,7 @@ export default function ConcentratorsPage() {
   );
 
   const [selectedProject, setSelectedProject] = useState("");
+  const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
 
   useEffect(() => {
     if (visibleProjects.length > 0 && !selectedProject) {
@@ -68,41 +66,22 @@ export default function ConcentratorsPage() {
     }
   }, [visibleProjects, selectedProject]);
 
-  const [concentrators, setConcentrators] = useState<Concentrator[]>([
+  const loadConcentrators = async () => {
-    {
+    setLoadingConcentrators(true);
-      "Area Name": "GRH (PADRE)",
+    try {
-      "Device S/N": "SN001",
+      const data = await fetchConcentrators();
-      "Device Name": "Concentrador A",
+      setConcentrators(data);
-      "Device Time": "2025-12-17T10:00:00Z",
+    } catch (error) {
-      "Device Status": "ACTIVE",
+      console.error("Error loading concentrators:", error);
-      "Operator": "Operador 1",
+      setConcentrators([]);
-      "Installed Time": "2025-12-17",
+    } finally {
-      "Communication Time": "2025-12-17T10:30:00Z",
+      setLoadingConcentrators(false);
-      "Instruction Manual": "Manual A",
+    }
-    },
+  };
-    {
+
-      "Area Name": "CESPT",
+  useEffect(() => {
-      "Device S/N": "SN002",
+    loadConcentrators();
-      "Device Name": "Concentrador B",
+  }, []);
-      "Device Time": "2025-12-16T11:00:00Z",
-      "Device Status": "INACTIVE",
-      "Operator": "Operador 2",
-      "Installed Time": "2025-12-16",
-      "Communication Time": "2025-12-16T11:30:00Z",
-      "Instruction Manual": "Manual B",
-    },
-    {
-      "Area Name": "Proyecto A",
-      "Device S/N": "SN003",
-      "Device Name": "Concentrador C",
-      "Device Time": "2025-12-15T12:00:00Z",
-      "Device Status": "ACTIVE",
-      "Operator": "Operador 3",
-      "Installed Time": "2025-12-15",
-      "Communication Time": "2025-12-15T12:30:00Z",
-      "Instruction Manual": "Manual C",
-    },
-  ]);
 
   const [activeConcentrator, setActiveConcentrator] = useState<Concentrator | null>(null);
   const [search, setSearch] = useState("");
@@ -128,14 +107,20 @@ export default function ConcentratorsPage() {
   const handleSave = async () => {
     try {
       if (editingSerial) {
+        const concentratorToUpdate = concentrators.find(c => c["Device S/N"] === editingSerial);
+        if (!concentratorToUpdate) {
+          throw new Error("Concentrator to update not found");
+        }
+
+        const updatedConcentrator = await updateConcentrator(concentratorToUpdate.id, form);
         setConcentrators((prev) =>
           prev.map((c) =>
-            c["Device S/N"] === editingSerial ? { ...form } : c
+            c.id === concentratorToUpdate.id ? updatedConcentrator : c
           )
         );
       } else {
-        await createConcentrator(form);
+        const newConcentrator = await createConcentrator(form);
-        setConcentrators((prev) => [...prev, { ...form }]);
+        setConcentrators((prev) => [...prev, newConcentrator]);
       }
       setShowModal(false);
       setEditingSerial(null);
@@ -143,20 +128,35 @@ export default function ConcentratorsPage() {
       setActiveConcentrator(null);
     } catch (error) {
       console.error('Error saving concentrator:', error);
-      setConcentrators((prev) => [...prev, { ...form }]);
+      alert(
-      setShowModal(false);
+        `Error saving concentrator: ${
-      setEditingSerial(null);
+          error instanceof Error ? error.message : "Please try again."
-      setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
+        }`
-      setActiveConcentrator(null);
+      );
     }
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!activeConcentrator) return;
-    setConcentrators((prev) =>
+
-      prev.filter((c) => c["Device S/N"] !== activeConcentrator["Device S/N"])
+    const confirmDelete = window.confirm(
+      `Are you sure you want to delete the concentrator "${activeConcentrator["Device Name"]}"?`
     );
+
+    if (!confirmDelete) return;
+
+    try {
+      await deleteConcentrator(activeConcentrator.id);
+      setConcentrators((prev) => prev.filter((c) => c.id !== activeConcentrator.id));
       setActiveConcentrator(null);
+    } catch (error) {
+      console.error("Error deleting concentrator:", error);
+      alert(
+        `Error deleting concentrator: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
   };
 
   /* ================= FILTER ================= */
@@ -180,10 +180,12 @@ export default function ConcentratorsPage() {
           value={selectedProject}
           onChange={(e) => setSelectedProject(e.target.value)}
           className="w-full border px-3 py-2 rounded"
-          disabled={loadingProjects}
+          disabled={loadingProjects || visibleProjects.length === 0}
         >
           {loadingProjects ? (
             <option>Loading projects...</option>
+          ) : visibleProjects.length === 0 ? (
+            <option>No projects available</option>
           ) : (
             visibleProjects.map((proj) => (
               <option key={proj} value={proj}>
@@ -192,6 +194,12 @@ export default function ConcentratorsPage() {
             ))
           )}
         </select>
+
+        {visibleProjects.length === 0 && !loadingProjects && (
+          <p className="text-sm text-gray-500 mt-2">
+            No projects available. Please contact your administrator.
+          </p>
+        )}
       </div>
 
       {/* MAIN */}
@@ -213,7 +221,8 @@ export default function ConcentratorsPage() {
                 setEditingSerial(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>
@@ -222,7 +231,17 @@ export default function ConcentratorsPage() {
               onClick={() => {
                 if (!activeConcentrator) return;
                 setEditingSerial(activeConcentrator["Device S/N"]);
-                setForm(activeConcentrator);
+                setForm({
+                  "Area Name": activeConcentrator["Area Name"],
+                  "Device S/N": activeConcentrator["Device S/N"],
+                  "Device Name": activeConcentrator["Device Name"],
+                  "Device Time": activeConcentrator["Device Time"],
+                  "Device Status": activeConcentrator["Device Status"],
+                  "Operator": activeConcentrator["Operator"],
+                  "Installed Time": activeConcentrator["Installed Time"],
+                  "Communication Time": activeConcentrator["Communication Time"],
+                  "Instruction Manual": activeConcentrator["Instruction Manual"],
+                });
                 setShowModal(true);
               }}
               disabled={!activeConcentrator}
@@ -240,18 +259,11 @@ export default function ConcentratorsPage() {
             </button>
 
             <button
-  onClick={() => {
+              onClick={loadConcentrators}
-    setSearch("");
-    setActiveConcentrator(null);
-    setShowModal(false);
-    setEditingSerial(null);
-    setForm(getEmptyConcentrator());
-  }}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
             >
               <RefreshCcw size={16} /> Refresh
             </button>
-
           </div>
         </div>
 
@@ -266,6 +278,7 @@ export default function ConcentratorsPage() {
         {/* TABLE */}
         <MaterialTable
           title="Concentrators"
+          isLoading={loadingConcentrators}
           columns={[
             { title: "Device Name", field: "Device Name" },
             { title: "Device S/N", field: "Device S/N" },
@@ -297,11 +310,18 @@ export default function ConcentratorsPage() {
             sorting: true,
             rowStyle: (rowData) => ({
               backgroundColor:
-                activeConcentrator?.["Device S/N"] === (rowData as Concentrator)["Device S/N"]
+                activeConcentrator?.id === (rowData as Concentrator).id
                   ? "#EEF2FF"
                   : "#FFFFFF",
             }),
           }}
+          localization={{
+            body: {
+              emptyDataSourceMessage: loadingConcentrators
+                ? "Loading concentrators..."
+                : "No concentrators found. Click 'Add' to create your first concentrator.",
+            },
+          }}
         />
       </div>
 

src/pages/concentrators/concentrators.api.ts

@@ -1,132 +0,0 @@
-interface ProjectRecord {
-  id: string;
-  fields: {
-    "Project ID": string;
-    "Area name": string;
-    "Device S/N": string;
-    "Device Name": string;
-    "Device Type": string;
-    "Device Status": string;
-    "Operator": string;
-    "Installed Time": string;
-    "Communication Time": string;
-    "Instruction Manual": string;
-  };
-}
-
-interface ProjectsResponse {
-  records: ProjectRecord[];
-  next?: string;
-  prev?: string;
-  nestedNext?: string;
-  nestedPrev?: string;
-}
-
-export const createConcentrator = async (concentratorData: {
-  "Area Name": string;
-  "Device S/N": string;
-  "Device Name": string;
-  "Device Time": string;
-  "Device Status": string;
-  "Operator": string;
-  "Installed Time": string;
-  "Communication Time": string;
-  "Instruction Manual": string;
-}): Promise<void> => {
-  try {
-    // const response = await fetch('/api/v3/data/ppfu31vhv5gf6i0/mqqvi3woqdw5ziq/records', {
-    //   method: 'POST',
-    //   headers: {
-    //     'Content-Type': 'application/json',
-    //   },
-    //   body: JSON.stringify({ fields: concentratorData }),
-    // });
-    // if (!response.ok) {
-    //   throw new Error('Failed to create concentrator');
-    // }
-
-    console.log('Creating concentrator with data:', concentratorData);
-  } catch (error) {
-    console.error('Error creating concentrator:', error);
-    throw error;
-  }
-};
-
-export const fetchProjects = async (): Promise<string[]> => {
-  try {
-    // const response = await fetch('/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records');
-    // const data: ProjectsResponse = await response.json();
-
-    const dummyResponse: ProjectsResponse = {
-      records: [
-        {
-          id: "rec1",
-          fields: {
-            "Project ID": "1",
-            "Area name": "GRH (PADRE)",
-            "Device S/N": "SN001",
-            "Device Name": "Device 1",
-            "Device Type": "Type A",
-            "Device Status": "Active",
-            "Operator": "Op1",
-            "Installed Time": "2023-01-01",
-            "Communication Time": "2023-01-02",
-            "Instruction Manual": "Manual 1"
-          }
-        },
-        {
-          id: "rec2",
-          fields: {
-            "Project ID": "2",
-            "Area name": "CESPT",
-            "Device S/N": "SN002",
-            "Device Name": "Device 2",
-            "Device Type": "Type B",
-            "Device Status": "Active",
-            "Operator": "Op2",
-            "Installed Time": "2023-01-02",
-            "Communication Time": "2023-01-03",
-            "Instruction Manual": "Manual 2"
-          }
-        },
-        {
-          id: "rec3",
-          fields: {
-            "Project ID": "3",
-            "Area name": "Proyecto A",
-            "Device S/N": "SN003",
-            "Device Name": "Device 3",
-            "Device Type": "Type C",
-            "Device Status": "Inactive",
-            "Operator": "Op3",
-            "Installed Time": "2023-01-03",
-            "Communication Time": "2023-01-04",
-            "Instruction Manual": "Manual 3"
-          }
-        },
-        {
-          id: "rec4",
-          fields: {
-            "Project ID": "4",
-            "Area name": "Proyecto B",
-            "Device S/N": "SN004",
-            "Device Name": "Device 4",
-            "Device Type": "Type D",
-            "Device Status": "Active",
-            "Operator": "Op4",
-            "Installed Time": "2023-01-04",
-            "Communication Time": "2023-01-05",
-            "Instruction Manual": "Manual 4"
-          }
-        }
-      ]
-    };
-
-    const projectNames = [...new Set(dummyResponse.records.map(record => record.fields["Area name"]))];
-
-    return projectNames;
-  } catch (error) {
-    console.error('Error fetching projects:', error);
-    return ["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"];
-  }
-};

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,113 @@ export default function MeterManagement() {
   const [editingId, setEditingId] = useState<string | null>(null);
 
   const emptyMeter: Omit<Meter, "id"> = {
-    serialNumber: "",
+    createdAt: new Date().toISOString(),
-    status: "ACTIVE",
+    updatedAt: new Date().toISOString(),
-    project: selectedProject,
+    areaName: "",
-    createdAt: new Date().toISOString().slice(0, 10),
+    accountNumber: null,
+    userName: null,
+    userAddress: null,
+    meterSerialNumber: "",
+    meterName: "",
+    meterStatus: "Installed",
+    protocolType: "",
+    priceNo: null,
+    priceName: null,
+    dmaPartition: null,
+    supplyTypes: "",
+    deviceId: "",
+    deviceName: "",
+    deviceType: "",
+    usageAnalysisType: "",
+    installedTime: new Date().toISOString(),
   };
 
   const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
 
-  /* ================= CRUD LOCAL ================= */
+  const loadMeters = async () => {
-  const handleSave = () => {
+    setLoadingMeters(true);
+    try {
+      const data = await fetchMeters();
+      setMeters(data);
+    } catch (error) {
+      console.error("Error loading meters:", error);
+      setMeters([]);
+    } finally {
+      setLoadingMeters(false);
+    }
+  };
+
+  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 ? { ...m, ...form } : m
+            m.id === editingId ? updatedMeter : m
           )
         );
       } else {
-      const newMeter: Meter = {
+        const newMeter = await createMeter(form);
-        id: (Math.random() * 1000000).toFixed(0),
-        ...form,
-      };
         setMeters((prev) => [...prev, newMeter]);
       }
-
       setShowModal(false);
       setEditingId(null);
-    setForm({ ...emptyMeter, project: selectedProject });
+      setForm(emptyMeter);
       setActiveMeter(null);
+    } catch (error) {
+      console.error('Error saving meter:', error);
+      alert(
+        `Error saving meter: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!activeMeter) return;
+
+    const confirmDelete = window.confirm(
+      `Are you sure you want to delete the meter "${activeMeter.meterName}" (${activeMeter.meterSerialNumber})?`
+    );
+
+    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.meterSerialNumber.toLowerCase().includes(search.toLowerCase()) ||
-      m.project === selectedProject
+        m.deviceId.toLowerCase().includes(search.toLowerCase()) ||
+        m.areaName.toLowerCase().includes(search.toLowerCase()))
   );
 
   /* ================= UI ================= */
@@ -137,13 +195,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>Loading projects...</option>
+          ) : visibleProjects.length === 0 ? (
+            <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 +235,12 @@ export default function MeterManagement() {
           <div className="flex gap-3">
             <button
               onClick={() => {
-                setForm({ ...emptyMeter, project: selectedProject });
+                setForm(emptyMeter);
                 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 +249,27 @@ export default function MeterManagement() {
               onClick={() => {
                 if (!activeMeter) return;
                 setEditingId(activeMeter.id);
-                setForm({ ...activeMeter });
+                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,
+                  deviceName: activeMeter.deviceName,
+                  deviceType: activeMeter.deviceType,
+                  usageAnalysisType: activeMeter.usageAnalysisType,
+                  installedTime: activeMeter.installedTime,
+                });
                 setShowModal(true);
               }}
               disabled={!activeMeter}
@@ -206,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)}
         />
@@ -214,25 +306,32 @@ export default function MeterManagement() {
         {/* TABLE */}
         <MaterialTable
           title="Meters"
+          isLoading={loadingMeters}
           columns={[
-            { title: "Serial", field: "serialNumber" },
+            { title: "Meter Name", field: "meterName" },
+            { title: "Serial Number", field: "meterSerialNumber" },
+            { title: "Area", field: "areaName" },
+            { title: "Device ID", field: "deviceId" },
+            { title: "Device Name", field: "deviceName" },
             {
               title: "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 === "Installed"
-                      ? "text-blue-600 border-blue-600"
+                      ? "text-green-600 border-green-600"
-                      : "text-red-600 border-red-600"
+                      : "text-gray-600 border-gray-600"
                   }`}
                 >
-                  {rowData.status}
+                  {rowData.meterStatus}
                 </span>
               ),
             },
-            { title: "Project", field: "project" },
+            { title: "Protocol", field: "protocolType" },
-            { title: "Created", field: "createdAt", type: "date" },
+            { 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)}
@@ -248,55 +347,196 @@ 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>
 
+            <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="Serial Number"
+                placeholder="Meter Name"
-              value={form.serialNumber}
+                value={form.meterName}
-              onChange={(e) =>
+                onChange={(e) => setForm({ ...form, meterName: e.target.value })}
-                setForm({ ...form, serialNumber: e.target.value })
-              }
               />
+            </div>
 
-            <button
+            <div className="space-y-1">
-              onClick={() =>
+              <label className="block text-sm font-medium text-gray-700">Meter Serial Number</label>
-                setForm({
+              <input
-                  ...form,
+                className="w-full border px-3 py-2 rounded"
-                  status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE",
+                placeholder="Meter S/N"
-                })
+                value={form.meterSerialNumber}
-              }
+                onChange={(e) => setForm({ ...form, meterSerialNumber: e.target.value })}
-              className="w-full border rounded px-3 py-2"
+              />
+            </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
+                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">Meter Status</label>
+              <select
+                className="w-full border px-3 py-2 rounded"
+                value={form.meterStatus}
+                onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
               >
-              Status: {form.status}
+                <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">Protocol Type</label>
               <input
                 className="w-full border px-3 py-2 rounded"
-              placeholder="Project"
+                placeholder="Protocol Type"
-              value={form.project}
+                value={form.protocolType}
-              onChange={(e) =>
+                onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
-                setForm({ ...form, project: e.target.value })
-              }
               />
+            </div>
 
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Supply Types</label>
               <input
-              type="date"
                 className="w-full border px-3 py-2 rounded"
-              value={form.createdAt}
+                placeholder="Supply Types"
-              onChange={(e) =>
+                value={form.supplyTypes}
-                setForm({ ...form, createdAt: e.target.value })
+                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.installedTime ? new Date(form.installedTime).toISOString().slice(0, 16) : ""}
+                onChange={(e) => setForm({ ...form, installedTime: new Date(e.target.value).toISOString() })}
+              />
+            </div>
 
             <div className="flex justify-end gap-2 pt-3">
               <button onClick={() => setShowModal(false)}>Cancel</button>

src/pages/projects/ProjectsPage.tsx

@@ -1,95 +1,23 @@
 import { useEffect, useState } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
-
+import {
-/* ================= TYPES ================= */
+  Project,
-interface Project {
+  fetchProjects,
-  id: string;
+  createProject as apiCreateProject,
-  areaName: string;
+  updateProject as apiUpdateProject,
-  deviceSN: string;
+  deleteProject as apiDeleteProject,
-  deviceName: string;
+} from "../../api/projects";
-  deviceType: string;
-  deviceStatus: "ACTIVE" | "INACTIVE";
-  operator: string;
-  installedTime: string;
-  communicationTime: string;
-  instructionManual: string;
-}
-
-/* ================= MOCK DATA ================= */
-const mockProjects: Project[] = [
-  {
-    id: "1",
-    areaName: "Zona Norte",
-    deviceSN: "SN-001",
-    deviceName: "Sensor Alpha",
-    deviceType: "Flow Meter",
-    deviceStatus: "ACTIVE",
-    operator: "Juan Pérez",
-    installedTime: "2024-01-10",
-    communicationTime: "2024-01-11",
-    instructionManual: "Manual Alpha",
-  },
-  {
-    id: "2",
-    areaName: "Zona Centro",
-    deviceSN: "SN-002",
-    deviceName: "Sensor Beta",
-    deviceType: "Pressure Meter",
-    deviceStatus: "INACTIVE",
-    operator: "María López",
-    installedTime: "2024-02-05",
-    communicationTime: "2024-02-06",
-    instructionManual: "Manual Beta",
-  },
-  {
-    id: "3",
-    areaName: "Zona Sur",
-    deviceSN: "SN-003",
-    deviceName: "Sensor Gamma",
-    deviceType: "Flow Meter",
-    deviceStatus: "ACTIVE",
-    operator: "Carlos Ruiz",
-    installedTime: "2024-03-01",
-    communicationTime: "2024-03-02",
-    instructionManual: "Manual Gamma",
-  },
-];
-
-/* ================= API ================= */
-const API_URL = "/api/v2/tables/m05u6wpquvdbv3c/records";
-
-const fetchProjects = async (): Promise<Project[]> => {
-  const res = await fetch(API_URL);
-  const data = await res.json();
-
-  return data.records.map((r: any) => ({
-    id: r.id,
-    areaName: r.fields["Area Name"] ?? "",
-    deviceSN: r.fields["Device S/N"] ?? "",
-    deviceName: r.fields["Device Name"] ?? "",
-    deviceType: r.fields["Device Type"] ?? "",
-    deviceStatus:
-      r.fields["Device Status"] === "INACTIVE"
-        ? "INACTIVE"
-        : "ACTIVE",
-    operator: r.fields["Operator"] ?? "",
-    installedTime: r.fields["Installed Time"] ?? "",
-    communicationTime: r.fields["Communication Time"] ?? "",
-    instructionManual: r.fields["Instruction Manual"] ?? "",
-  }));
-};
 
 /* ================= COMPONENT ================= */
 export default function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([]);
-  const [activeProject, setActiveProject] =
+  const [loading, setLoading] = useState(true);
-    useState<Project | null>(null);
+  const [activeProject, setActiveProject] = useState<Project | null>(null);
   const [search, setSearch] = useState("");
 
   const [showModal, setShowModal] = useState(false);
-  const [editingId, setEditingId] =
+  const [editingId, setEditingId] = useState<string | null>(null);
-    useState<string | null>(null);
 
   const emptyProject: Omit<Project, "id"> = {
     areaName: "",
@@ -103,20 +31,19 @@ export default function ProjectsPage() {
     instructionManual: "",
   };
 
-  const [form, setForm] =
+  const [form, setForm] = useState<Omit<Project, "id">>(emptyProject);
-    useState<Omit<Project, "id">>(emptyProject);
 
   /* ================= LOAD ================= */
   const loadProjects = async () => {
+    setLoading(true);
     try {
       const data = await fetchProjects();
-      if (data.length === 0) {
-        setProjects(mockProjects);
-      } else {
       setProjects(data);
-      }
+    } catch (error) {
-    } catch {
+      console.error("Error loading projects:", error);
-      setProjects(mockProjects);
+      setProjects([]);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -124,37 +51,54 @@ export default function ProjectsPage() {
     loadProjects();
   }, []);
 
-  /* ================= CRUD ================= */
+
-  const handleSave = () => {
+  const handleSave = async () => {
+    try {
       if (editingId) {
+        const updatedProject = await apiUpdateProject(editingId, form);
         setProjects((prev) =>
-        prev.map((p) =>
+          prev.map((p) => (p.id === editingId ? updatedProject : p))
-          p.id === editingId
-            ? { ...p, ...form }
-            : p
-        )
         );
       } else {
-      setProjects((prev) => [
+        const newProject = await apiCreateProject(form);
-        ...prev,
+        setProjects((prev) => [...prev, newProject]);
-        { id: Date.now().toString(), ...form },
-      ]);
       }
 
       setShowModal(false);
       setEditingId(null);
       setForm(emptyProject);
       setActiveProject(null);
+    } catch (error) {
+      console.error("Error saving project:", error);
+      alert(
+        `Error saving project: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!activeProject) return;
-    setProjects((prev) =>
+
-      prev.filter(
+    const confirmDelete = window.confirm(
-        (p) => p.id !== activeProject.id
+      `Are you sure you want to delete the project "${activeProject.deviceName}"?`
-      )
     );
+
+    if (!confirmDelete) return;
+
+    try {
+      await apiDeleteProject(activeProject.id);
+      setProjects((prev) => prev.filter((p) => p.id !== activeProject.id));
       setActiveProject(null);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+      alert(
+        `Error deleting project: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
   };
 
   /* ================= FILTER ================= */
@@ -172,17 +116,12 @@ export default function ProjectsPage() {
         <div
           className="rounded-xl shadow p-6 text-white flex justify-between items-center"
           style={{
-            background:
+            background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)",
-              "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)",
           }}
         >
           <div>
-            <h1 className="text-2xl font-bold">
+            <h1 className="text-2xl font-bold">Project Management</h1>
-              Project Management
+            <p className="text-sm text-blue-100">Projects registered</p>
-            </h1>
-            <p className="text-sm text-blue-100">
-              Projects registered
-            </p>
           </div>
 
           <div className="flex gap-3">
@@ -248,6 +187,7 @@ export default function ProjectsPage() {
         {/* TABLE */}
         <MaterialTable
           title="Projects"
+          isLoading={loading}
           columns={[
             { title: "Area Name", field: "areaName" },
             { title: "Device S/N", field: "deviceSN" },
@@ -274,21 +214,25 @@ export default function ProjectsPage() {
             { title: "Instruction Manual", field: "instructionManual" },
           ]}
           data={filtered}
-          onRowClick={(_, rowData) =>
+          onRowClick={(_, rowData) => setActiveProject(rowData as Project)}
-            setActiveProject(rowData as Project)
-          }
           options={{
             search: false,
             paging: true,
             sorting: true,
             rowStyle: (rowData) => ({
               backgroundColor:
-                activeProject?.id ===
+                activeProject?.id === (rowData as Project).id
-                (rowData as Project).id
                   ? "#EEF2FF"
                   : "#FFFFFF",
             }),
           }}
+          localization={{
+            body: {
+              emptyDataSourceMessage: loading
+                ? "Loading projects..."
+                : "No projects found. Click 'Add' to create your first project.",
+            },
+          }}
         />
       </div>
 
@@ -300,46 +244,74 @@ export default function ProjectsPage() {
               {editingId ? "Edit Project" : "Add Project"}
             </h2>
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Area Name"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Area Name"
               value={form.areaName}
-              onChange={(e) => setForm({ ...form, areaName: e.target.value })} />
+              onChange={(e) => setForm({ ...form, areaName: e.target.value })}
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Device S/N"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Device S/N"
               value={form.deviceSN}
-              onChange={(e) => setForm({ ...form, deviceSN: e.target.value })} />
+              onChange={(e) => setForm({ ...form, deviceSN: e.target.value })}
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Device Name"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Device Name"
               value={form.deviceName}
-              onChange={(e) => setForm({ ...form, deviceName: e.target.value })} />
+              onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Device Type"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Device Type"
               value={form.deviceType}
-              onChange={(e) => setForm({ ...form, deviceType: e.target.value })} />
+              onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Operator"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Operator"
               value={form.operator}
-              onChange={(e) => setForm({ ...form, operator: e.target.value })} />
+              onChange={(e) => setForm({ ...form, operator: e.target.value })}
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Installed Time"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Installed Time"
               value={form.installedTime}
-              onChange={(e) => setForm({ ...form, installedTime: e.target.value })} />
+              onChange={(e) =>
+                setForm({ ...form, installedTime: e.target.value })
+              }
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Communication Time"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Communication Time"
               value={form.communicationTime}
-              onChange={(e) => setForm({ ...form, communicationTime: e.target.value })} />
+              onChange={(e) =>
+                setForm({ ...form, communicationTime: e.target.value })
+              }
+            />
 
-            <input className="w-full border px-3 py-2 rounded" placeholder="Instruction Manual"
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Instruction Manual"
               value={form.instructionManual}
-              onChange={(e) => setForm({ ...form, instructionManual: e.target.value })} />
+              onChange={(e) =>
+                setForm({ ...form, instructionManual: e.target.value })
+              }
+            />
 
             <button
               onClick={() =>
                 setForm({
                   ...form,
                   deviceStatus:
-                    form.deviceStatus === "ACTIVE"
+                    form.deviceStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE",
-                      ? "INACTIVE"
-                      : "ACTIVE",
                 })
               }
               className="w-full border rounded px-3 py-2"
@@ -348,9 +320,7 @@ export default function ProjectsPage() {
             </button>
 
             <div className="flex justify-end gap-2 pt-3">
-              <button onClick={() => setShowModal(false)}>
+              <button onClick={() => setShowModal(false)}>Cancel</button>
-                Cancel
-              </button>
               <button
                 onClick={handleSave}
                 className="bg-[#4c5f9e] text-white px-4 py-2 rounded"

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()],
 
   server: {
-    host: '0.0.0.0', // Esto permite que el servidor escuche en todas las IP disponibles
+    allowedHosts: [
-    port: 5173, // Puerto por defecto de Vite (puedes cambiarlo si lo deseas)
+      "localhost",
+      "127.0.0.1",
+      "reyna-compressive-shaunna.ngrok-free.dev",
+    ],
+    port: 5173,
   },
-
+});
-})
-