consultoria-as/GRH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Meter tyoe logic for projects in concentrators page

Browse Source
This commit is contained in:
Esteban
2026-02-02 19:01:02 -06:00
parent f921b20e15
commit b273003366
3 changed files with 111 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/concentrators/ConcentratorsPage.tsx
View File

@@ -170,6 +170,15 @@ export default function ConcentratorsPage() {
projects={c.projectsData}
onRefresh={c.loadConcentrators}
refreshDisabled={c.loadingProjects}
meterTypes={c.meterTypes}
selectedMeterTypeId={c.selectedMeterTypeId}
onSelectMeterTypeId={(id: string) => {
c.setSelectedMeterTypeId(id);
c.setSelectedProject("");
setActiveConcentrator(null);
setSearch("");
}}
loadingMeterTypes={c.loadingMeterTypes}
/>
</aside>
@@ -181,7 +190,9 @@ export default function ConcentratorsPage() {
<div>
<h1 className="text-2xl font-bold">Concentrator Management</h1>
<p className="text-sm text-blue-100">
{c.selectedProject
{c.projectsData.length === 0 && c.selectedMeterTypeId
? `No hay proyectos disponibles con el filtro seleccionado`
: c.selectedProject
? `Proyecto: ${c.selectedProject} • Tipo: ${c.sampleViewLabel}`
: "Selecciona un proyecto desde el panel izquierdo"}
</p>
@@ -190,7 +201,7 @@ export default function ConcentratorsPage() {
<div className="flex gap-3">
<button
onClick={openCreateModal}
disabled={c.allProjects.length === 0}
disabled={c.allProjects.length === 0 || c.projectsData.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} /> Agregar
@@ -214,6 +225,7 @@ export default function ConcentratorsPage() {
<button
onClick={c.loadConcentrators}
disabled={c.projectsData.length === 0}
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
>
<RefreshCcw size={16} /> Actualizar
@@ -222,11 +234,11 @@ export default function ConcentratorsPage() {
</div>
<input
className="bg-white rounded-lg shadow px-4 py-2 text-sm"
className="bg-white rounded-lg shadow px-4 py-2 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
placeholder="Buscar concentrador..."
value={search}
onChange={(e) => setSearch(e.target.value)}
disabled={!c.selectedProject}
disabled={!c.selectedProject || c.projectsData.length === 0}
/>
<div className={!c.selectedProject ? "opacity-60 pointer-events-none" : ""}>
@@ -236,7 +248,11 @@ export default function ConcentratorsPage() {
activeRowId={activeConcentrator?.id}
onRowClick={(row) => setActiveConcentrator(row)}
emptyMessage={
!c.selectedProject
c.projectsData.length === 0 && c.selectedMeterTypeId
? `No hay proyectos con el tipo de toma seleccionado (${
c.meterTypes.find((mt) => mt.id === c.selectedMeterTypeId)?.name ?? "desconocido"
}) que tengan concentradores.`
: !c.selectedProject
? "Selecciona un proyecto para ver los concentradores."
: c.loadingConcentrators
? "Cargando concentradores..."

57
src/pages/concentrators/ConcentratorsSidebar.tsx
View File

@@ -1,7 +1,8 @@
// src/pages/concentrators/ConcentratorsSidebar.tsx
import { useMemo } from "react";
import { ChevronDown, Check, RefreshCcw } from "lucide-react";
import { Check, RefreshCcw } from "lucide-react";
import type { ProjectCard, SampleView } from "./ConcentratorsPage";
import type { MeterType } from "../../api/meterTypes";
type Props = {
loadingProjects: boolean;
@@ -23,6 +24,11 @@ type Props = {
onRefresh: () => void;
refreshDisabled: boolean;
meterTypes: MeterType[];
selectedMeterTypeId: string;
onSelectMeterTypeId: (id: string) => void;
loadingMeterTypes: boolean;
};
export default function ConcentratorsSidebar({
@@ -30,13 +36,16 @@ export default function ConcentratorsSidebar({
sampleView,
sampleViewLabel,
typesMenuOpen,
setTypesMenuOpen,
onChangeSampleView,
selectedProject,
onSelectProject,
projects,
onRefresh,
refreshDisabled,
meterTypes,
selectedMeterTypeId,
onSelectMeterTypeId,
loadingMeterTypes,
}: Props) {
const options = useMemo(
() =>
@@ -76,24 +85,7 @@ export default function ConcentratorsSidebar({
</button>
</div>
{/* Tipos de tomas (dropdown) */}
<div className="mt-4 relative">
<button
type="button"
onClick={() => setTypesMenuOpen((v) => !v)}
className="w-full inline-flex items-center justify-between rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
>
<span className="flex items-center gap-2">
Tipos de tomas
<span className="text-xs font-semibold text-gray-500">
({sampleViewLabel})
</span>
</span>
<ChevronDown
size={16}
className={`${typesMenuOpen ? "rotate-180" : ""} transition`}
/>
</button>
{typesMenuOpen && (
<div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden">
@@ -124,15 +116,36 @@ export default function ConcentratorsSidebar({
)}
</div>
<div className="mt-3">
<label className="block text-xs font-semibold text-gray-700 mb-1.5">
Filtrar por Tipo de Toma
</label>
<select
value={selectedMeterTypeId}
onChange={(e) => onSelectMeterTypeId(e.target.value)}
disabled={loadingMeterTypes}
className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
>
<option value="">Todos los tipos de toma</option>
{meterTypes.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
</div>
{/* List */}
<div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
{loadingProjects ? (
<div className="text-sm text-gray-500">Loading projects...</div>
) : projects.length === 0 ? (
<div className="text-sm text-gray-500">
{sampleView === "GENERAL"
? "No projects available. Please contact your administrator."
: `No projects with ${sampleViewLabel} concentrators found.`
{selectedMeterTypeId
? `No hay proyectos con el tipo de toma seleccionado y concentradores ${sampleViewLabel}.`
: sampleView === "GENERAL"
? "No hay proyectos con concentradores disponibles."
: `No hay proyectos con concentradores ${sampleViewLabel}.`
}
</div>
) : (

58
src/pages/concentrators/useConcentrators.ts
View File

@@ -5,6 +5,7 @@ import {
type ConcentratorType,
} from "../../api/concentrators";
import { fetchProjects, type Project } from "../../api/projects";
import { fetchMeterTypes, type MeterType } from "../../api/meterTypes";
import type { ProjectCard, SampleView } from "./ConcentratorsPage";
type User = {
@@ -17,10 +18,14 @@ export function useConcentrators(currentUser: User) {
const [loadingProjects, setLoadingProjects] = useState(true);
const [loadingConcentrators, setLoadingConcentrators] = useState(true);
const [loadingMeterTypes, setLoadingMeterTypes] = useState(true);
const [projects, setProjects] = useState<Project[]>([]);
const [allProjects, setAllProjects] = useState<string[]>([]);
const [selectedProject, setSelectedProject] = useState("");
const [meterTypes, setMeterTypes] = useState<MeterType[]>([]);
const [selectedMeterTypeId, setSelectedMeterTypeId] = useState<string>("");
const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
const [filteredConcentrators, setFilteredConcentrators] = useState<
@@ -54,6 +59,19 @@ export function useConcentrators(currentUser: User) {
[allProjects, currentUser.role, currentUser.project]
);
const loadMeterTypes = async () => {
setLoadingMeterTypes(true);
try {
const meterTypesData = await fetchMeterTypes();
setMeterTypes(meterTypesData);
} catch (err) {
console.error("Error loading meter types:", err);
setMeterTypes([]);
} finally {
setLoadingMeterTypes(false);
}
};
const loadProjects = async () => {
setLoadingProjects(true);
try {
@@ -92,8 +110,8 @@ export function useConcentrators(currentUser: User) {
}
};
// init - load projects and concentrators
useEffect(() => {
loadMeterTypes();
loadProjects();
loadConcentrators();
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -163,7 +181,21 @@ export function useConcentrators(currentUser: User) {
const baseContact = "Operaciones";
const baseLastSync = "Hace 1 h";
return visibleProjects.map((projectId) => ({
let filteredProjects = visibleProjects;
filteredProjects = filteredProjects.filter((projectId) => {
const count = counts[projectId] ?? 0;
return count > 0;
});
if (selectedMeterTypeId) {
filteredProjects = filteredProjects.filter((projectId) => {
const project = projects.find((p) => p.id === projectId);
return project?.meterTypeId === selectedMeterTypeId;
});
}
return filteredProjects.map((projectId) => ({
id: projectId,
name: projectNameMap[projectId] ?? projectId,
region: baseRegion,
@@ -174,12 +206,27 @@ export function useConcentrators(currentUser: User) {
contact: baseContact,
status: "ACTIVO" as const,
}));
}, [concentrators, visibleProjects, projects, isGeneral, sampleView]);
}, [concentrators, visibleProjects, projects, isGeneral, sampleView, selectedMeterTypeId]);
const projectsData: ProjectCard[] = useMemo(() => {
return projectsDataGeneral;
}, [projectsDataGeneral]);
useEffect(() => {
if (projectsData.length > 0) {
const firstProject = projectsData[0];
const currentProjectExists = projectsData.find((p) => p.id === selectedProject);
if (!selectedProject || !currentProjectExists) {
setSelectedProject(firstProject.id);
}
} else {
if (selectedProject) {
setSelectedProject("");
}
}
}, [projectsData]);
return {
// view
sampleView,
@@ -190,6 +237,7 @@ export function useConcentrators(currentUser: User) {
// loading
loadingProjects,
loadingConcentrators,
loadingMeterTypes,
// projects
allProjects,
@@ -198,6 +246,10 @@ export function useConcentrators(currentUser: User) {
selectedProject,
setSelectedProject,
meterTypes,
selectedMeterTypeId,
setSelectedMeterTypeId,
// data
concentrators,
setConcentrators,