meter types

src/pages/projects/ProjectsPage.tsx

@@ -9,6 +9,7 @@ import {
   updateProject as apiUpdateProject,
   deleteProject as apiDeleteProject,
 } from "../../api/projects";
+import { fetchMeterTypes, type MeterType } from "../../api/meterTypes";
 
 export default function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -18,6 +19,8 @@ export default function ProjectsPage() {
 
   const [showModal, setShowModal] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
+  
+  const [meterTypes, setMeterTypes] = useState<MeterType[]>([]);
 
   const emptyForm: ProjectInput = {
     name: "",
@@ -25,6 +28,7 @@ export default function ProjectsPage() {
     areaName: "",
     location: "",
     status: "ACTIVE",
+    meterTypeId: null,
   };
 
   const [form, setForm] = useState<ProjectInput>(emptyForm);
@@ -42,8 +46,19 @@ export default function ProjectsPage() {
     }
   };
 
+  const loadMeterTypesData = async () => {
+    try {
+      const types = await fetchMeterTypes();
+      setMeterTypes(types);
+    } catch (error) {
+      console.error("Error loading meter types:", error);
+      setMeterTypes([]);
+    }
+  };
+
   useEffect(() => {
     loadProjects();
+    loadMeterTypesData();
   }, []);
 
   const handleSave = async () => {
@@ -104,6 +119,7 @@ export default function ProjectsPage() {
       areaName: activeProject.areaName,
       location: activeProject.location ?? "",
       status: activeProject.status,
+      meterTypeId: activeProject.meterTypeId ?? null,
     });
     setShowModal(true);
   };
@@ -183,6 +199,19 @@ export default function ProjectsPage() {
           columns={[
             { title: "Nombre", field: "name" },
             { title: "Area", field: "areaName" },
+            { 
+              title: "Tipo de Toma", 
+              field: "meterTypeId",
+              render: (rowData: Project) => {
+                if (!rowData.meterTypeId) return "-";
+                const meterType = meterTypes.find(mt => mt.id === rowData.meterTypeId);
+                return meterType ? (
+                  <span className="px-2 py-1 rounded text-xs font-medium bg-indigo-100 text-indigo-700">
+                    {meterType.name}
+                  </span>
+                ) : "-";
+              }
+            },
             { title: "Descripción", field: "description", render: (rowData: Project) => rowData.description || "-" },
             { title: "Ubicación", field: "location", render: (rowData: Project) => rowData.location || "-" },
             {
@@ -278,6 +307,27 @@ export default function ProjectsPage() {
               />
             </div>
 
+            <div>
+              <label className="block text-sm text-gray-600 mb-1">Tipo de Toma</label>
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={form.meterTypeId ?? ""}
+                onChange={(e) => setForm({ ...form, meterTypeId: e.target.value || null })}
+              >
+                <option value="">Selecciona un tipo (opcional)</option>
+                {meterTypes.map((type) => (
+                  <option key={type.id} value={type.id}>
+                    {type.name}
+                  </option>
+                ))}
+              </select>
+              {meterTypes.length === 0 && (
+                <p className="text-xs text-amber-600 mt-1">
+                  No hay tipos de toma disponibles. Asegúrate de aplicar la migración SQL.
+                </p>
+              )}
+            </div>
+
             <div>
               <label className="block text-sm text-gray-600 mb-1">Estado</label>
               <select