Projects api improve

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"];
-  }
-};