// src/pages/meters/MetersSidebar.tsx import { useEffect, useMemo, useRef, useState } from "react"; import { ChevronDown, RefreshCcw, Check } from "lucide-react"; import type React from "react"; import type { ProjectCard, TakeType } from "./MeterPage"; type Props = { loadingProjects: boolean; takeType: TakeType; setTakeType: (t: TakeType) => void; selectedProject: string; setSelectedProject: React.Dispatch>; isMockMode: boolean; projects: ProjectCard[]; onRefresh: () => void; refreshDisabled?: boolean; allProjects: string[]; onResetSelection?: () => void; }; type TakeTypeOption = { key: TakeType; label: string }; const TAKE_TYPE_OPTIONS: TakeTypeOption[] = [ { key: "GENERAL", label: "General" }, { key: "LORA", label: "LoRa" }, { key: "LORAWAN", label: "LoRaWAN" }, { key: "GRANDES", label: "Grandes consumidores" }, ]; export default function MetersSidebar({ loadingProjects, takeType, setTakeType, selectedProject, setSelectedProject, isMockMode, projects, onRefresh, refreshDisabled, allProjects, onResetSelection, }: Props) { const [typesMenuOpen, setTypesMenuOpen] = useState(false); // para detectar click fuera (igual a tu implementación) const menuRef = useRef(null); useEffect(() => { const onClickOutside = (e: MouseEvent) => { if (!menuRef.current) return; if (!menuRef.current.contains(e.target as Node)) { setTypesMenuOpen(false); } }; document.addEventListener("mousedown", onClickOutside); return () => document.removeEventListener("mousedown", onClickOutside); }, []); const takeTypeLabel = useMemo( () => TAKE_TYPE_OPTIONS.find((o) => o.key === takeType)?.label ?? "General", [takeType] ); return ( ); }