Dashboard logic

src/App.tsx

@@ -19,13 +19,20 @@ export type Page =
 
 export default function App() {
   const [page, setPage] = useState<Page>("home");
+  const [subPage, setSubPage] = useState<string>("default");
+  const [selectedProject, setSelectedProject] = useState<string>("");
+
+  const navigateToMetersWithProject = (projectName: string) => {
+    setSelectedProject(projectName);
+    setPage("meters");
+  };
 
   const renderPage = () => {
     switch (page) {
       case "projects":
         return <ProjectsPage />;
       case "meters":
-        return <MetersPage />;
+        return <MetersPage selectedProject={selectedProject} />;
       case "concentrators":
         return <ConcentratorsPage />;
       case "users":
@@ -34,7 +41,7 @@ export default function App() {
         return <RolesPage />;
       case "home":
       default:
-        return <Home setPage={setPage} />;
+        return <Home setPage={setPage} navigateToMetersWithProject={navigateToMetersWithProject} />;
     }
   };
 
@@ -42,7 +49,7 @@ export default function App() {
     <div className="flex h-screen">
       <Sidebar setPage={setPage} />
       <div className="flex-1 flex flex-col">
-        <TopMenu />
+        <TopMenu page={page} subPage={subPage} setSubPage={setSubPage} />
         <main className="flex-1 overflow-auto">
           {renderPage()}
         </main>

src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import { Cpu, Settings, BarChart3, Bell } from "lucide-react";
+import { useEffect, useState } from "react";
 import {
   BarChart,
   Bar,
@@ -8,9 +9,42 @@ import {
   ResponsiveContainer,
   CartesianGrid,
 } from "recharts";
+import { fetchMeters, Meter } from "../api/meters";
 import { Page } from "../App";
 
-export default function Home({ setPage }: { setPage: (page: Page) => void }) {
+export default function Home({ 
+  setPage, 
+  navigateToMetersWithProject 
+}: { 
+  setPage: (page: Page) => void;
+  navigateToMetersWithProject: (projectName: string) => void;
+}) {
+  const [allProjects, setAllProjects] = useState<string[]>([]);
+  const [meters, setMeters] = useState<Meter[]>([]);
+  
+
+  const loadMeters = async () => {
+    const data = await fetchMeters();
+    setMeters(data);
+    const projectsArray = [...new Set(data.map((record: Meter) => record["areaName"]))];
+    setAllProjects(projectsArray);
+  }
+  useEffect(() => {
+    loadMeters();
+  }, []);
+
+  const chartData = allProjects.map((projectName) => ({
+    name: projectName,
+    meterCount: meters.filter((meter) => meter.areaName === projectName).length,
+  }));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleBarClick = (data: any) => {
+    if (data.activeLabel) {
+      navigateToMetersWithProject(data.activeLabel);
+    }
+  };
+
   // Datos de ejemplo para empresas
   const companies = [
     { name: "Empresa A", tomas: 12, alerts: 2, consumption: 320 },
@@ -119,19 +153,24 @@ export default function Home({ setPage }: { setPage: (page: Page) => void }) {
       {/* Gráfica de consumo */}
       <div className="bg-white rounded-xl shadow p-6">
         <h2 className="text-lg font-semibold mb-4">
-          Consumo de Agua por Empresa
+          Número de Medidores por Proyecto
         </h2>
         <div className="h-60">
           <ResponsiveContainer width="100%" height="100%">
             <BarChart
-              data={companies}
+              data={chartData}
               margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+              onClick={handleBarClick}
             >
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="name" />
               <YAxis />
               <Tooltip />
-              <Bar dataKey="consumption" fill="#4c5f9e" />
+              <Bar 
+                dataKey="meterCount" 
+                fill="#4c5f9e" 
+                cursor="pointer"
+              />
             </BarChart>
           </ResponsiveContainer>
         </div>

src/pages/meters/MeterPage.tsx

@@ -18,12 +18,12 @@ interface DeviceData {
 }
 
 /* ================= COMPONENT ================= */
-export default function MeterManagement() {
+export default function MeterManagement({ selectedProject: initialProject }: { selectedProject?: string } = {}) {
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [loadingProjects, setLoadingProjects] = useState(true);
 
 
-  const [selectedProject, setSelectedProject] = useState("");
+  const [selectedProject, setSelectedProject] = useState(initialProject || "");
 
   const [meters, setMeters] = useState<Meter[]>([]);
   const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
@@ -97,6 +97,12 @@ export default function MeterManagement() {
     loadMeters();
   }, []);
 
+  useEffect(() => {
+    if (initialProject) {
+      setSelectedProject(initialProject);
+    }
+  }, [initialProject]);
+
   const createOrUpdateDevice = async (deviceData: DeviceData): Promise<void> => {
     //await fetch('/api/devices', { method: 'POST', body: JSON.stringify(deviceData) })