Merge pull request #2 from luanngel/DevEsteban

Dev esteban

.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/App.tsx

@@ -5,22 +5,33 @@ import TopMenu from "./components/layout/TopMenu";
 import Home from "./pages/Home";
 import MetersPage from "./pages/meters/MeterPage";
 import ConcentratorsPage from "./pages/concentrators/ConcentratorsPage";
-import UsersPage from "./pages/UsersPage"; // nueva página
+import ProjectsPage from "./pages/projects/ProjectsPage";
-import RolesPage from "./pages/RolesPage"; // nueva página
+import UsersPage from "./pages/UsersPage";
+import RolesPage from "./pages/RolesPage";
+
+export type Page =
+  | "home"
+  | "projects"
+  | "meters"
+  | "concentrators"
+  | "users"
+  | "roles";
 
 export default function App() {
-  const [page, setPage] = useState("home");
+  const [page, setPage] = useState<Page>("home");
 
   const renderPage = () => {
     switch (page) {
+      case "projects":
+        return <ProjectsPage />;
       case "meters":
         return <MetersPage />;
       case "concentrators":
         return <ConcentratorsPage />;
       case "users":
-        return <UsersPage />; // nueva
+        return <UsersPage />;
       case "roles":
-        return <RolesPage />; // nueva
+        return <RolesPage />;
       case "home":
       default:
         return <Home />;
@@ -32,7 +43,9 @@ export default function App() {
       <Sidebar setPage={setPage} />
       <div className="flex-1 flex flex-col">
         <TopMenu />
-        <main className="flex-1 overflow-auto">{renderPage()}</main>
+        <main className="flex-1 overflow-auto">
+          {renderPage()}
+        </main>
       </div>
     </div>
   );

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,241 @@
+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: {
+    device_id: string;
+    meter_address: string;
+    manufacturer_code: string;
+    forward_cumulative_flow: number;
+    reverse_cumulative_flow: number;
+    forward_instantaneous_flow: number;
+    water_temperature: number;
+    voltage: number;
+    echo_amplitude: number;
+    ultrasonic_flight_time: number;
+    timestamp: string;
+    alarm_bytes: string;
+    checksum_ok: boolean;
+    received_at: string;
+  };
+}
+
+export interface MetersResponse {
+  records: MeterRecord[];
+  next?: string;
+  prev?: string;
+  nestedNext?: string;
+  nestedPrev?: string;
+}
+
+export interface Meter {
+  id: string;
+  deviceId: string;
+  meterAddress: string;
+  manufacturerCode: string;
+  forwardCumulativeFlow: number;
+  reverseCumulativeFlow: number;
+  forwardInstantaneousFlow: number;
+  waterTemperature: number;
+  voltage: number;
+  echoAmplitude: number;
+  ultrasonicFlightTime: number;
+  timestamp: string;
+  alarmBytes: string;
+  checksumOk: boolean;
+  receivedAt: string;
+}
+
+export const fetchMeters = async (): Promise<Meter[]> => {
+  try {
+    const response = await fetch(METERS_API_URL, {
+      method: "GET",
+      headers: getAuthHeaders(),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch meters");
+    }
+
+    const data: MetersResponse = await response.json();
+
+    return data.records.map((r: MeterRecord) => ({
+      id: r.id,
+      deviceId: r.fields.device_id || "",
+      meterAddress: r.fields.meter_address || "",
+      manufacturerCode: r.fields.manufacturer_code || "",
+      forwardCumulativeFlow: r.fields.forward_cumulative_flow || 0,
+      reverseCumulativeFlow: r.fields.reverse_cumulative_flow || 0,
+      forwardInstantaneousFlow: r.fields.forward_instantaneous_flow || 0,
+      waterTemperature: r.fields.water_temperature || 0,
+      voltage: r.fields.voltage || 0,
+      echoAmplitude: r.fields.echo_amplitude || 0,
+      ultrasonicFlightTime: r.fields.ultrasonic_flight_time || 0,
+      timestamp: r.fields.timestamp || "",
+      alarmBytes: r.fields.alarm_bytes || "",
+      checksumOk: r.fields.checksum_ok || false,
+      receivedAt: r.fields.received_at || "",
+    }));
+  } 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: {
+          device_id: meterData.deviceId,
+          meter_address: meterData.meterAddress,
+          manufacturer_code: meterData.manufacturerCode,
+          forward_cumulative_flow: meterData.forwardCumulativeFlow,
+          reverse_cumulative_flow: meterData.reverseCumulativeFlow,
+          forward_instantaneous_flow: meterData.forwardInstantaneousFlow,
+          water_temperature: meterData.waterTemperature,
+          voltage: meterData.voltage,
+          echo_amplitude: meterData.echoAmplitude,
+          ultrasonic_flight_time: meterData.ultrasonicFlightTime,
+          timestamp: meterData.timestamp,
+          alarm_bytes: meterData.alarmBytes,
+          checksum_ok: meterData.checksumOk,
+          received_at: meterData.receivedAt,
+        },
+      }),
+    });
+
+    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,
+      deviceId: createdRecord.fields.device_id || meterData.deviceId,
+      meterAddress: createdRecord.fields.meter_address || meterData.meterAddress,
+      manufacturerCode: createdRecord.fields.manufacturer_code || meterData.manufacturerCode,
+      forwardCumulativeFlow: createdRecord.fields.forward_cumulative_flow || meterData.forwardCumulativeFlow,
+      reverseCumulativeFlow: createdRecord.fields.reverse_cumulative_flow || meterData.reverseCumulativeFlow,
+      forwardInstantaneousFlow: createdRecord.fields.forward_instantaneous_flow || meterData.forwardInstantaneousFlow,
+      waterTemperature: createdRecord.fields.water_temperature || meterData.waterTemperature,
+      voltage: createdRecord.fields.voltage || meterData.voltage,
+      echoAmplitude: createdRecord.fields.echo_amplitude || meterData.echoAmplitude,
+      ultrasonicFlightTime: createdRecord.fields.ultrasonic_flight_time || meterData.ultrasonicFlightTime,
+      timestamp: createdRecord.fields.timestamp || meterData.timestamp,
+      alarmBytes: createdRecord.fields.alarm_bytes || meterData.alarmBytes,
+      checksumOk: createdRecord.fields.checksum_ok || meterData.checksumOk,
+      receivedAt: createdRecord.fields.received_at || meterData.receivedAt,
+    };
+  } 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: {
+          device_id: meterData.deviceId,
+          meter_address: meterData.meterAddress,
+          manufacturer_code: meterData.manufacturerCode,
+          forward_cumulative_flow: meterData.forwardCumulativeFlow,
+          reverse_cumulative_flow: meterData.reverseCumulativeFlow,
+          forward_instantaneous_flow: meterData.forwardInstantaneousFlow,
+          water_temperature: meterData.waterTemperature,
+          voltage: meterData.voltage,
+          echo_amplitude: meterData.echoAmplitude,
+          ultrasonic_flight_time: meterData.ultrasonicFlightTime,
+          timestamp: meterData.timestamp,
+          alarm_bytes: meterData.alarmBytes,
+          checksum_ok: meterData.checksumOk,
+          received_at: meterData.receivedAt,
+        },
+      }),
+    });
+
+    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,
+      deviceId: updatedRecord.fields.device_id || meterData.deviceId,
+      meterAddress: updatedRecord.fields.meter_address || meterData.meterAddress,
+      manufacturerCode: updatedRecord.fields.manufacturer_code || meterData.manufacturerCode,
+      forwardCumulativeFlow: updatedRecord.fields.forward_cumulative_flow || meterData.forwardCumulativeFlow,
+      reverseCumulativeFlow: updatedRecord.fields.reverse_cumulative_flow || meterData.reverseCumulativeFlow,
+      forwardInstantaneousFlow: updatedRecord.fields.forward_instantaneous_flow || meterData.forwardInstantaneousFlow,
+      waterTemperature: updatedRecord.fields.water_temperature || meterData.waterTemperature,
+      voltage: updatedRecord.fields.voltage || meterData.voltage,
+      echoAmplitude: updatedRecord.fields.echo_amplitude || meterData.echoAmplitude,
+      ultrasonicFlightTime: updatedRecord.fields.ultrasonic_flight_time || meterData.ultrasonicFlightTime,
+      timestamp: updatedRecord.fields.timestamp || meterData.timestamp,
+      alarmBytes: updatedRecord.fields.alarm_bytes || meterData.alarmBytes,
+      checksumOk: updatedRecord.fields.checksum_ok || meterData.checksumOk,
+      receivedAt: updatedRecord.fields.received_at || meterData.receivedAt,
+    };
+  } 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/components/layout/Sidebar.tsx

@@ -7,17 +7,16 @@ import {
   ExpandLess,
   Menu,
   People,
-  Key
 } from "@mui/icons-material";
+import { Page } from "../../App";
 
 interface SidebarProps {
-  setPage: (page: string) => void;
+  setPage: (page: Page) => void;
 }
 
 export default function Sidebar({ setPage }: SidebarProps) {
   const [systemOpen, setSystemOpen] = useState(true);
-  const [waterOpen, setWaterOpen] = useState(true);
+  const [usersOpen, setUsersOpen] = useState(true);
-  const [usersOpen, setUsersOpen] = useState(true); // Nuevo
   const [pinned, setPinned] = useState(false);
   const [hovered, setHovered] = useState(false);
 
@@ -51,7 +50,6 @@ export default function Sidebar({ setPage }: SidebarProps) {
       {/* MENU */}
       <div className="flex-1 py-4 px-2 overflow-y-auto">
         <ul className="space-y-1 text-white text-sm">
-
           {/* DASHBOARD */}
           <li>
             <button
@@ -72,7 +70,9 @@ export default function Sidebar({ setPage }: SidebarProps) {
               <Settings className="w-5 h-5 shrink-0" />
               {isExpanded && (
                 <>
-                  <span className="ml-3 flex-1 text-left">Project Management</span>
+                  <span className="ml-3 flex-1 text-left">
+                    Project Management
+                  </span>
                   {systemOpen ? <ExpandLess /> : <ExpandMore />}
                 </>
               )}
@@ -80,67 +80,38 @@ export default function Sidebar({ setPage }: SidebarProps) {
 
             {isExpanded && systemOpen && (
               <ul className="mt-1 space-y-1 text-xs">
+                <li>
+                  <button
+                    onClick={() => setPage("projects")}
+                    className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
+                  >
+                    Projects
+                  </button>
+                </li>
+
                 <li>
                   <button
                     onClick={() => setPage("concentrators")}
                     className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
                   >
-                    Concentradores
+                    Concentrators
                   </button>
                 </li>
+
                 <li>
                   <button
                     onClick={() => setPage("meters")}
                     className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
                   >
-                    Medidores
+                    Meters
                   </button>
                 </li>
               </ul>
             )}
           </li>
 
-          {/* WATER METER SYSTEM 
+          {/* USERS MANAGEMENT */}
           <li>
-            <button
-              onClick={() => isExpanded && setWaterOpen(!waterOpen)}
-              className="flex items-center w-full px-2 py-2 rounded-md hover:bg-white/10 font-bold"
-            >
-              <WaterDrop className="w-5 h-5 shrink-0" />
-              {isExpanded && (
-                <>
-                  <span className="ml-3 flex-1 text-left">Water Meter System Management</span>
-                  {waterOpen ? <ExpandLess /> : <ExpandMore />}
-                </>
-              )}
-            </button>
-
-            {isExpanded && waterOpen && (
-              <ul className="mt-1 space-y-1 text-xs">
-                {[
-                  ["water-install", "Water Meter Installation"],
-                  ["device-install", "Device Installation"],
-                  ["meter-management", "Meter Management"],
-                  ["device-management", "Device Management"],
-                  ["data-monitoring", "Data Monitoring"],
-                  ["data-query", "Data Query"],
-                ].map(([key, label]) => (
-                  <li key={key}>
-                    <button
-                      onClick={() => setPage(key)}
-                      className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
-                    >
-                      {label}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </li>
-          *}
-
-         {/* SYSTEM USERS */}
-<li>
             <button
               onClick={() => isExpanded && setUsersOpen(!usersOpen)}
               className="flex items-center w-full px-2 py-2 rounded-md hover:bg-white/10 font-bold"
@@ -148,7 +119,9 @@ export default function Sidebar({ setPage }: SidebarProps) {
               <People className="w-5 h-5 shrink-0" />
               {isExpanded && (
                 <>
-        <span className="ml-3 flex-1 text-left">Users Management</span>
+                  <span className="ml-3 flex-1 text-left">
+                    Users Management
+                  </span>
                   {usersOpen ? <ExpandLess /> : <ExpandMore />}
                 </>
               )}
@@ -174,9 +147,7 @@ export default function Sidebar({ setPage }: SidebarProps) {
                 </li>
               </ul>
             )}
-</li>
+          </li>
-
-
         </ul>
       </div>
     </aside>

src/pages/concentrators/ConcentratorsPage.tsx

@@ -1,16 +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 {
+  fetchConcentrators,
+  createConcentrator,
+  updateConcentrator,
+  deleteConcentrator,
+  type Concentrator,
+} from "../../api/concentrators";
 
 /* ================= TYPES ================= */
-interface Concentrator {
-  id: number;
-  name: string;
-  location: string;
-  status: "ACTIVE" | "INACTIVE";
-  project: string;
-  createdAt: string;
-}
 
 interface User {
   name: string;
@@ -27,96 +27,144 @@ export default function ConcentratorsPage() {
     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);
+  const [loadingConcentrators, setLoadingConcentrators] = useState(true);
+
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        const projects = await fetchProjectNames();
+        setAllProjects(projects);
+      } catch (error) {
+        console.error('Error loading projects:', error);
+        setAllProjects([]);
+      } finally {
+        setLoadingProjects(false);
+      }
+    };
+
+    loadProjects();
+  }, []);
 
   // 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] || ""
   );
 
-  const [concentrators, setConcentrators] = useState<Concentrator[]>([
+  const [selectedProject, setSelectedProject] = useState("");
-    {
+  const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
-      id: 1,
+
-      name: "Concentrador A",
+  useEffect(() => {
-      location: "Planta 1",
+    if (visibleProjects.length > 0 && !selectedProject) {
-      status: "ACTIVE",
+      setSelectedProject(visibleProjects[0]);
-      project: "GRH (PADRE)",
+    }
-      createdAt: "2025-12-17",
+  }, [visibleProjects, selectedProject]);
-    },
+
-    {
+  const loadConcentrators = async () => {
-      id: 2,
+    setLoadingConcentrators(true);
-      name: "Concentrador B",
+    try {
-      location: "Planta 2",
+      const data = await fetchConcentrators();
-      status: "INACTIVE",
+      setConcentrators(data);
-      project: "CESPT",
+    } catch (error) {
-      createdAt: "2025-12-16",
+      console.error("Error loading concentrators:", error);
-    },
+      setConcentrators([]);
-    {
+    } finally {
-      id: 3,
+      setLoadingConcentrators(false);
-      name: "Concentrador C",
+    }
-      location: "Planta 3",
+  };
-      status: "ACTIVE",
+
-      project: "Proyecto A",
+  useEffect(() => {
-      createdAt: "2025-12-15",
+    loadConcentrators();
-    },
+  }, []);
-  ]);
 
   const [activeConcentrator, setActiveConcentrator] = useState<Concentrator | null>(null);
   const [search, setSearch] = useState("");
 
   const [showModal, setShowModal] = useState(false);
-  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editingSerial, setEditingSerial] = useState<string | null>(null);
 
-  const emptyConcentrator: Omit<Concentrator, "id"> = {
+  const getEmptyConcentrator = (): Omit<Concentrator, "id"> => ({
-    name: "",
+    "Area Name": selectedProject,
-    location: "",
+    "Device S/N": "",
-    status: "ACTIVE",
+    "Device Name": "",
-    project: selectedProject,
+    "Device Time": new Date().toISOString(),
-    createdAt: new Date().toISOString().slice(0, 10),
+    "Device Status": "ACTIVE",
-  };
+    "Operator": "",
+    "Installed Time": new Date().toISOString().slice(0, 10),
+    "Communication Time": new Date().toISOString(),
+    "Instruction Manual": "",
+  });
 
-  const [form, setForm] = useState<Omit<Concentrator, "id">>(emptyConcentrator);
+  const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
 
   /* ================= CRUD ================= */
-  const handleSave = () => {
+  const handleSave = async () => {
-    if (editingId) {
+    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.id === editingId ? { id: editingId, ...form } : c
+            c.id === concentratorToUpdate.id ? updatedConcentrator : c
           )
         );
       } else {
-      const newId = Date.now();
+        const newConcentrator = await createConcentrator(form);
-      setConcentrators((prev) => [...prev, { id: newId, ...form }]);
+        setConcentrators((prev) => [...prev, newConcentrator]);
       }
       setShowModal(false);
-    setEditingId(null);
+      setEditingSerial(null);
-    setForm({ ...emptyConcentrator, project: selectedProject });
+      setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
       setActiveConcentrator(null);
+    } catch (error) {
+      console.error('Error saving concentrator:', error);
+      alert(
+        `Error saving concentrator: ${
+          error instanceof Error ? error.message : "Please try again."
+        }`
+      );
+    }
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!activeConcentrator) return;
-    setConcentrators((prev) =>
+
-      prev.filter((c) => c.id !== activeConcentrator.id)
+    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 ================= */
   const filtered = concentrators.filter(
     (c) =>
-      (c.name.toLowerCase().includes(search.toLowerCase()) ||
+      (c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
-        c.location.toLowerCase().includes(search.toLowerCase())) &&
+        c["Device S/N"].toLowerCase().includes(search.toLowerCase())) &&
-      c.project === selectedProject
+      c["Area Name"] === selectedProject
   );
 
   /* ================= UI ================= */
@@ -132,13 +180,26 @@ export default function ConcentratorsPage() {
           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 */}
@@ -156,11 +217,12 @@ export default function ConcentratorsPage() {
           <div className="flex gap-3">
             <button
               onClick={() => {
-                setForm({ ...emptyConcentrator, project: selectedProject });
+                setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
-                setEditingId(null);
+                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>
@@ -168,8 +230,18 @@ export default function ConcentratorsPage() {
             <button
               onClick={() => {
                 if (!activeConcentrator) return;
-                setEditingId(activeConcentrator.id);
+                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}
@@ -187,7 +259,7 @@ export default function ConcentratorsPage() {
             </button>
 
             <button
-              onClick={() => setConcentrators([...concentrators])}
+              onClick={loadConcentrators}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
             >
               <RefreshCcw size={16} /> Refresh
@@ -206,26 +278,28 @@ export default function ConcentratorsPage() {
         {/* TABLE */}
         <MaterialTable
           title="Concentrators"
+          isLoading={loadingConcentrators}
           columns={[
-            { title: "Name", field: "name" },
+            { title: "Device Name", field: "Device Name" },
+            { title: "Device S/N", field: "Device S/N" },
             {
-              title: "Status",
+              title: "Device Status",
-              field: "status",
+              field: "Device Status",
               render: (rowData) => (
                 <span
                   className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                    rowData.status === "ACTIVE"
+                    rowData["Device Status"] === "ACTIVE"
                       ? "text-blue-600 border-blue-600"
                       : "text-red-600 border-red-600"
                   }`}
                 >
-                  {rowData.status}
+                  {rowData["Device Status"]}
                 </span>
               ),
             },
-            { title: "Location", field: "location" },
+            { title: "Operator", field: "Operator" },
-            { title: "Project", field: "project" },
+            { title: "Area Name", field: "Area Name" },
-            { title: "Created", field: "createdAt", type: "date" },
+            { title: "Installed Time", field: "Installed Time", type: "date" },
           ]}
           data={filtered}
           onRowClick={(_, rowData) => setActiveConcentrator(rowData as Concentrator)}
@@ -241,6 +315,13 @@ export default function ConcentratorsPage() {
                   : "#FFFFFF",
             }),
           }}
+          localization={{
+            body: {
+              emptyDataSourceMessage: loadingConcentrators
+                ? "Loading concentrators..."
+                : "No concentrators found. Click 'Add' to create your first concentrator.",
+            },
+          }}
         />
       </div>
 
@@ -249,41 +330,93 @@ export default function ConcentratorsPage() {
         <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">
             <h2 className="text-lg font-semibold">
-              {editingId ? "Edit Concentrator" : "Add Concentrator"}
+              {editingSerial ? "Edit Concentrator" : "Add Concentrator"}
             </h2>
 
+            <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="Name"
+                placeholder="Enter device name"
-              value={form.name}
+                value={form["Device Name"]}
-              onChange={(e) => setForm({ ...form, name: e.target.value })}
+                onChange={(e) => setForm({ ...form, "Device Name": e.target.value })}
               />
+            </div>
 
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Device S/N</label>
               <input
                 className="w-full border px-3 py-2 rounded"
-              placeholder="Location"
+                placeholder="Enter device serial number"
-              value={form.location}
+                value={form["Device S/N"]}
-              onChange={(e) => setForm({ ...form, location: e.target.value })}
+                onChange={(e) => setForm({ ...form, "Device S/N": e.target.value })}
               />
+            </div>
 
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Operator</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Enter operator name"
+                value={form["Operator"]}
+                onChange={(e) => setForm({ ...form, "Operator": e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Instruction Manual</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Enter instruction manual"
+                value={form["Instruction Manual"]}
+                onChange={(e) => setForm({ ...form, "Instruction Manual": e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Device Status</label>
               <button
                 onClick={() =>
                   setForm({
                     ...form,
-                  status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE",
+                    "Device Status": form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
                   })
                 }
-              className="w-full border rounded px-3 py-2"
+                className="w-full border rounded px-3 py-2 hover:bg-gray-50"
               >
-              Status: {form.status}
+                Status: {form["Device Status"]}
               </button>
+            </div>
 
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Installed Time</label>
               <input
                 type="date"
                 className="w-full border px-3 py-2 rounded"
-              value={form.createdAt}
+                value={form["Installed Time"]}
-              onChange={(e) => setForm({ ...form, createdAt: e.target.value })}
+                onChange={(e) => setForm({ ...form, "Installed Time": e.target.value })}
               />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Device Time</label>
+              <input
+                type="datetime-local"
+                className="w-full border px-3 py-2 rounded"
+                value={form["Device Time"].slice(0, 16)}
+                onChange={(e) => setForm({ ...form, "Device Time": new Date(e.target.value).toISOString() })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Communication Time</label>
+              <input
+                type="datetime-local"
+                className="w-full border px-3 py-2 rounded"
+                value={form["Communication Time"].slice(0, 16)}
+                onChange={(e) => setForm({ ...form, "Communication Time": new Date(e.target.value).toISOString() })}
+              />
+            </div>
 
             <div className="flex justify-end gap-2 pt-3">
               <button onClick={() => setShowModal(false)}>Cancel</button>

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,107 @@ export default function MeterManagement() {
   const [editingId, setEditingId] = useState<string | null>(null);
 
   const emptyMeter: Omit<Meter, "id"> = {
-    serialNumber: "",
+    deviceId: "",
-    status: "ACTIVE",
+    meterAddress: "",
-    project: selectedProject,
+    manufacturerCode: "",
-    createdAt: new Date().toISOString().slice(0, 10),
+    forwardCumulativeFlow: 0,
+    reverseCumulativeFlow: 0,
+    forwardInstantaneousFlow: 0,
+    waterTemperature: 0,
+    voltage: 0,
+    echoAmplitude: 0,
+    ultrasonicFlightTime: 0,
+    timestamp: new Date().toISOString(),
+    alarmBytes: "",
+    checksumOk: true,
+    receivedAt: new Date().toISOString(),
   };
 
   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.deviceId}"?`
+    );
+
+    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.deviceId.toLowerCase().includes(search.toLowerCase()) ||
-        m.project.toLowerCase().includes(search.toLowerCase())) &&
+        m.meterAddress.toLowerCase().includes(search.toLowerCase()) ||
-      m.project === selectedProject
+        m.manufacturerCode.toLowerCase().includes(search.toLowerCase()))
   );
 
   /* ================= UI ================= */
@@ -137,13 +189,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 +229,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 +243,22 @@ export default function MeterManagement() {
               onClick={() => {
                 if (!activeMeter) return;
                 setEditingId(activeMeter.id);
-                setForm({ ...activeMeter });
+                setForm({
+                  deviceId: activeMeter.deviceId,
+                  meterAddress: activeMeter.meterAddress,
+                  manufacturerCode: activeMeter.manufacturerCode,
+                  forwardCumulativeFlow: activeMeter.forwardCumulativeFlow,
+                  reverseCumulativeFlow: activeMeter.reverseCumulativeFlow,
+                  forwardInstantaneousFlow: activeMeter.forwardInstantaneousFlow,
+                  waterTemperature: activeMeter.waterTemperature,
+                  voltage: activeMeter.voltage,
+                  echoAmplitude: activeMeter.echoAmplitude,
+                  ultrasonicFlightTime: activeMeter.ultrasonicFlightTime,
+                  timestamp: activeMeter.timestamp,
+                  alarmBytes: activeMeter.alarmBytes,
+                  checksumOk: activeMeter.checksumOk,
+                  receivedAt: activeMeter.receivedAt,
+                });
                 setShowModal(true);
               }}
               disabled={!activeMeter}
@@ -214,25 +295,43 @@ export default function MeterManagement() {
         {/* TABLE */}
         <MaterialTable
           title="Meters"
+          isLoading={loadingMeters}
           columns={[
-            { title: "Serial", field: "serialNumber" },
+            { title: "Device ID", field: "deviceId" },
+            { title: "Meter Address", field: "meterAddress" },
+            { title: "Manufacturer Code", field: "manufacturerCode" },
             {
-              title: "Status",
+              title: "Forward Flow",
-              field: "status",
+              field: "forwardCumulativeFlow",
+              render: (rowData) => `${rowData.forwardCumulativeFlow?.toFixed(3) || 0} m³`
+            },
+            {
+              title: "Water Temp",
+              field: "waterTemperature",
+              render: (rowData) => `${rowData.waterTemperature?.toFixed(1) || 0}°C`
+            },
+            {
+              title: "Voltage",
+              field: "voltage",
+              render: (rowData) => `${rowData.voltage || 0}V`
+            },
+            {
+              title: "Checksum OK",
+              field: "checksumOk",
               render: (rowData) => (
                 <span
                   className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                    rowData.status === "ACTIVE"
+                    rowData.checksumOk
-                      ? "text-blue-600 border-blue-600"
+                      ? "text-green-600 border-green-600"
                       : "text-red-600 border-red-600"
                   }`}
                 >
-                  {rowData.status}
+                  {rowData.checksumOk ? "OK" : "ERROR"}
                 </span>
               ),
             },
-            { title: "Project", field: "project" },
+            { title: "Timestamp", field: "timestamp", type: "datetime" },
-            { title: "Created", field: "createdAt", type: "date" },
+            { title: "Received At", field: "receivedAt", type: "datetime" },
           ]}
           data={filtered}
           onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
@@ -248,55 +347,175 @@ 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">Device ID</label>
               <input
                 className="w-full border px-3 py-2 rounded"
-              placeholder="Serial Number"
+                placeholder="Device ID"
-              value={form.serialNumber}
+                value={form.deviceId}
-              onChange={(e) =>
+                onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
-                setForm({ ...form, serialNumber: e.target.value })
-              }
               />
+            </div>
 
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Meter Address</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Meter Address"
+                value={form.meterAddress}
+                onChange={(e) => setForm({ ...form, meterAddress: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Manufacturer Code</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Manufacturer Code"
+                value={form.manufacturerCode}
+                onChange={(e) => setForm({ ...form, manufacturerCode: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Forward Cumulative Flow (m³)</label>
+              <input
+                type="number"
+                step="0.001"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0.000"
+                value={form.forwardCumulativeFlow}
+                onChange={(e) => setForm({ ...form, forwardCumulativeFlow: parseFloat(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Reverse Cumulative Flow (m³)</label>
+              <input
+                type="number"
+                step="0.001"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0.000"
+                value={form.reverseCumulativeFlow}
+                onChange={(e) => setForm({ ...form, reverseCumulativeFlow: parseFloat(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Forward Instantaneous Flow</label>
+              <input
+                type="number"
+                step="0.001"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0.000"
+                value={form.forwardInstantaneousFlow}
+                onChange={(e) => setForm({ ...form, forwardInstantaneousFlow: parseFloat(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Water Temperature (°C)</label>
+              <input
+                type="number"
+                step="0.1"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0.0"
+                value={form.waterTemperature}
+                onChange={(e) => setForm({ ...form, waterTemperature: parseFloat(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Voltage (V)</label>
+              <input
+                type="number"
+                step="0.1"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0.0"
+                value={form.voltage}
+                onChange={(e) => setForm({ ...form, voltage: parseFloat(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Echo Amplitude</label>
+              <input
+                type="number"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0"
+                value={form.echoAmplitude}
+                onChange={(e) => setForm({ ...form, echoAmplitude: parseInt(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Ultrasonic Flight Time</label>
+              <input
+                type="number"
+                className="w-full border px-3 py-2 rounded"
+                placeholder="0"
+                value={form.ultrasonicFlightTime}
+                onChange={(e) => setForm({ ...form, ultrasonicFlightTime: parseInt(e.target.value) || 0 })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Timestamp</label>
+              <input
+                type="datetime-local"
+                className="w-full border px-3 py-2 rounded"
+                value={form.timestamp ? new Date(form.timestamp).toISOString().slice(0, 16) : ""}
+                onChange={(e) => setForm({ ...form, timestamp: new Date(e.target.value).toISOString() })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Alarm Bytes</label>
+              <input
+                className="w-full border px-3 py-2 rounded"
+                placeholder="Alarm Bytes"
+                value={form.alarmBytes}
+                onChange={(e) => setForm({ ...form, alarmBytes: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Checksum OK</label>
               <button
-              onClick={() =>
+                onClick={() => setForm({ ...form, checksumOk: !form.checksumOk })}
-                setForm({
+                className="w-full border rounded px-3 py-2 hover:bg-gray-50"
-                  ...form,
-                  status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE",
-                })
-              }
-              className="w-full border rounded px-3 py-2"
               >
-              Status: {form.status}
+                Status: {form.checksumOk ? "OK" : "ERROR"}
               </button>
+            </div>
 
+            <div className="space-y-1">
+              <label className="block text-sm font-medium text-gray-700">Received At</label>
               <input
+                type="datetime-local"
                 className="w-full border px-3 py-2 rounded"
-              placeholder="Project"
+                value={form.receivedAt ? new Date(form.receivedAt).toISOString().slice(0, 16) : ""}
-              value={form.project}
+                onChange={(e) => setForm({ ...form, receivedAt: new Date(e.target.value).toISOString() })}
-              onChange={(e) =>
-                setForm({ ...form, project: e.target.value })
-              }
-            />
-
-            <input
-              type="date"
-              className="w-full border px-3 py-2 rounded"
-              value={form.createdAt}
-              onChange={(e) =>
-                setForm({ ...form, createdAt: e.target.value })
-              }
               />
+            </div>
 
             <div className="flex justify-end gap-2 pt-3">
               <button onClick={() => setShowModal(false)}>Cancel</button>

src/pages/projects/ProjectsPage.tsx

@@ -0,0 +1,336 @@
+import { useEffect, useState } from "react";
+import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
+import MaterialTable from "@material-table/core";
+import {
+  Project,
+  fetchProjects,
+  createProject as apiCreateProject,
+  updateProject as apiUpdateProject,
+  deleteProject as apiDeleteProject,
+} from "../../api/projects";
+
+/* ================= COMPONENT ================= */
+export default function ProjectsPage() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeProject, setActiveProject] = useState<Project | null>(null);
+  const [search, setSearch] = useState("");
+
+  const [showModal, setShowModal] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const emptyProject: Omit<Project, "id"> = {
+    areaName: "",
+    deviceSN: "",
+    deviceName: "",
+    deviceType: "",
+    deviceStatus: "ACTIVE",
+    operator: "",
+    installedTime: "",
+    communicationTime: "",
+    instructionManual: "",
+  };
+
+  const [form, setForm] = useState<Omit<Project, "id">>(emptyProject);
+
+  /* ================= LOAD ================= */
+  const loadProjects = async () => {
+    setLoading(true);
+    try {
+      const data = await fetchProjects();
+      setProjects(data);
+    } catch (error) {
+      console.error("Error loading projects:", error);
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadProjects();
+  }, []);
+
+
+  const handleSave = async () => {
+    try {
+      if (editingId) {
+        const updatedProject = await apiUpdateProject(editingId, form);
+        setProjects((prev) =>
+          prev.map((p) => (p.id === editingId ? updatedProject : p))
+        );
+      } else {
+        const newProject = await apiCreateProject(form);
+        setProjects((prev) => [...prev, newProject]);
+      }
+
+      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 = async () => {
+    if (!activeProject) return;
+
+    const confirmDelete = window.confirm(
+      `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 ================= */
+  const filtered = projects.filter((p) =>
+    `${p.areaName} ${p.deviceName} ${p.deviceSN}`
+      .toLowerCase()
+      .includes(search.toLowerCase())
+  );
+
+  /* ================= UI ================= */
+  return (
+    <div className="flex gap-6 p-6 w-full bg-gray-100">
+      <div className="flex-1 flex flex-col gap-6">
+        {/* HEADER */}
+        <div
+          className="rounded-xl shadow p-6 text-white flex justify-between items-center"
+          style={{
+            background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)",
+          }}
+        >
+          <div>
+            <h1 className="text-2xl font-bold">Project Management</h1>
+            <p className="text-sm text-blue-100">Projects registered</p>
+          </div>
+
+          <div className="flex gap-3">
+            <button
+              onClick={() => {
+                setForm(emptyProject);
+                setEditingId(null);
+                setShowModal(true);
+              }}
+              className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"
+            >
+              <Plus size={16} /> Add
+            </button>
+
+            <button
+              onClick={() => {
+                if (!activeProject) return;
+                setEditingId(activeProject.id);
+                setForm({
+                  areaName: activeProject.areaName,
+                  deviceSN: activeProject.deviceSN,
+                  deviceName: activeProject.deviceName,
+                  deviceType: activeProject.deviceType,
+                  deviceStatus: activeProject.deviceStatus,
+                  operator: activeProject.operator,
+                  installedTime: activeProject.installedTime,
+                  communicationTime: activeProject.communicationTime,
+                  instructionManual: activeProject.instructionManual,
+                });
+                setShowModal(true);
+              }}
+              disabled={!activeProject}
+              className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
+            >
+              <Pencil size={16} /> Edit
+            </button>
+
+            <button
+              onClick={handleDelete}
+              disabled={!activeProject}
+              className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
+            >
+              <Trash2 size={16} /> Delete
+            </button>
+
+            <button
+              onClick={loadProjects}
+              className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
+            >
+              <RefreshCcw size={16} /> Refresh
+            </button>
+          </div>
+        </div>
+
+        {/* SEARCH */}
+        <input
+          className="bg-white rounded-lg shadow px-4 py-2 text-sm"
+          placeholder="Search project..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+
+        {/* TABLE */}
+        <MaterialTable
+          title="Projects"
+          isLoading={loading}
+          columns={[
+            { title: "Area Name", field: "areaName" },
+            { title: "Device S/N", field: "deviceSN" },
+            { title: "Device Name", field: "deviceName" },
+            { title: "Device Type", field: "deviceType" },
+            {
+              title: "Status",
+              field: "deviceStatus",
+              render: (rowData) => (
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-semibold border ${
+                    rowData.deviceStatus === "ACTIVE"
+                      ? "text-blue-600 border-blue-600"
+                      : "text-red-600 border-red-600"
+                  }`}
+                >
+                  {rowData.deviceStatus}
+                </span>
+              ),
+            },
+            { title: "Operator", field: "operator" },
+            { title: "Installed Time", field: "installedTime" },
+            { title: "Communication Time", field: "communicationTime" },
+            { title: "Instruction Manual", field: "instructionManual" },
+          ]}
+          data={filtered}
+          onRowClick={(_, rowData) => setActiveProject(rowData as Project)}
+          options={{
+            search: false,
+            paging: true,
+            sorting: true,
+            rowStyle: (rowData) => ({
+              backgroundColor:
+                activeProject?.id === (rowData as Project).id
+                  ? "#EEF2FF"
+                  : "#FFFFFF",
+            }),
+          }}
+          localization={{
+            body: {
+              emptyDataSourceMessage: loading
+                ? "Loading projects..."
+                : "No projects found. Click 'Add' to create your first project.",
+            },
+          }}
+        />
+      </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">
+            <h2 className="text-lg font-semibold">
+              {editingId ? "Edit Project" : "Add Project"}
+            </h2>
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Area Name"
+              value={form.areaName}
+              onChange={(e) => setForm({ ...form, areaName: e.target.value })}
+            />
+
+            <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 })}
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Device Name"
+              value={form.deviceName}
+              onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Device Type"
+              value={form.deviceType}
+              onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Operator"
+              value={form.operator}
+              onChange={(e) => setForm({ ...form, operator: e.target.value })}
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Installed Time"
+              value={form.installedTime}
+              onChange={(e) =>
+                setForm({ ...form, installedTime: e.target.value })
+              }
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Communication Time"
+              value={form.communicationTime}
+              onChange={(e) =>
+                setForm({ ...form, communicationTime: e.target.value })
+              }
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded"
+              placeholder="Instruction Manual"
+              value={form.instructionManual}
+              onChange={(e) =>
+                setForm({ ...form, instructionManual: e.target.value })
+              }
+            />
+
+            <button
+              onClick={() =>
+                setForm({
+                  ...form,
+                  deviceStatus:
+                    form.deviceStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE",
+                })
+              }
+              className="w-full border rounded px-3 py-2"
+            >
+              Status: {form.deviceStatus}
+            </button>
+
+            <div className="flex justify-end gap-2 pt-3">
+              <button onClick={() => setShowModal(false)}>Cancel</button>
+              <button
+                onClick={handleSave}
+                className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

vite.config.ts

@@ -5,4 +5,11 @@ import tailwindcss from "@tailwindcss/vite"
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(),tailwindcss()],
+
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
+
 })
+