Projects api improve

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 ["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"];
+  }
+};
+
+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,7 +1,8 @@
 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 { createConcentrator } from "./concentrators.api";
 
 /* ================= TYPES ================= */
 interface Concentrator {
@@ -37,7 +38,7 @@ export default function ConcentratorsPage() {
   useEffect(() => {
     const loadProjects = async () => {
       try {
-        const projects = await fetchProjects();
+        const projects = await fetchProjectNames();
         setAllProjects(projects);
       } catch (error) {
         console.error('Error loading projects:', error);
@@ -180,10 +181,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 +195,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 +222,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>

src/pages/concentrators/concentrators.api.ts

@@ -1,27 +1,3 @@
-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;
@@ -51,82 +27,3 @@ export const createConcentrator = async (concentratorData: {
     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/projects/ProjectsPage.tsx

@@ -1,67 +1,13 @@
 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;
-}
-
-/* ================= API ================= */
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-const API_URL = `${API_BASE_URL}/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records`;
-const API_TOKEN = import.meta.env.VITE_API_TOKEN;
-
-const getAuthHeaders = () => ({
-  Authorization: `Bearer ${API_TOKEN}`,
-  "Content-Type": "application/json",
-});
-
-interface ProjectApiRecord {
-  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;
-  };
-}
-
-const fetchProjects = async (): Promise<Project[]> => {
-  const res = await fetch(API_URL, {
-    method: "GET",
-    headers: getAuthHeaders(),
-  });
-  const data = await res.json();
-
-  return data.records.map((r: ProjectApiRecord) => ({
-    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"] ?? "",
-  }));
-};
 
 /* ================= COMPONENT ================= */
 export default function ProjectsPage() {
@@ -105,160 +51,16 @@ export default function ProjectsPage() {
     loadProjects();
   }, []);
 
-  /* ================= CRUD ================= */
-  const createProject = async (
-    projectData: Omit<Project, "id">
-  ): Promise<Project> => {
-    const res = await fetch(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 (!res.ok) {
-      throw new Error(
-        `Failed to create project: ${res.status} ${res.statusText}`
-      );
-    }
-
-    const data = await res.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,
-    };
-  };
-
-  const updateProject = async (
-    id: string,
-    projectData: Omit<Project, "id">
-  ): Promise<Project> => {
-    const res = await fetch(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 (!res.ok) {
-      if (res.status === 400) {
-        const errorData = await res.json();
-        throw new Error(
-          `Bad Request: ${errorData.msg || "Invalid data provided"}`
-        );
-      }
-      throw new Error(
-        `Failed to update project: ${res.status} ${res.statusText}`
-      );
-    }
-
-    const data = await res.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,
-    };
-  };
-
-  const deleteProject = async (id: string): Promise<void> => {
-    const res = await fetch(API_URL, {
-      method: "DELETE",
-      headers: getAuthHeaders(),
-      body: JSON.stringify({
-        id: id,
-      }),
-    });
-
-    if (!res.ok) {
-      if (res.status === 400) {
-        const errorData = await res.json();
-        throw new Error(
-          `Bad Request: ${errorData.msg || "Invalid data provided"}`
-        );
-      }
-      throw new Error(
-        `Failed to delete project: ${res.status} ${res.statusText}`
-      );
-    }
-  };
 
   const handleSave = async () => {
     try {
       if (editingId) {
-        const updatedProject = await updateProject(editingId, form);
+        const updatedProject = await apiUpdateProject(editingId, form);
         setProjects((prev) =>
           prev.map((p) => (p.id === editingId ? updatedProject : p))
         );
       } else {
-        const newProject = await createProject(form);
+        const newProject = await apiCreateProject(form);
         setProjects((prev) => [...prev, newProject]);
       }
 
@@ -286,7 +88,7 @@ export default function ProjectsPage() {
     if (!confirmDelete) return;
 
     try {
-      await deleteProject(activeProject.id);
+      await apiDeleteProject(activeProject.id);
       setProjects((prev) => prev.filter((p) => p.id !== activeProject.id));
       setActiveProject(null);
     } catch (error) {