Dashboard navigate to meters from Tomas card

src/App.tsx

@@ -34,7 +34,7 @@ export default function App() {
         return <RolesPage />;
       case "home":
       default:
-        return <Home />;
+        return <Home setPage={setPage} />;
     }
   };
 

src/pages/Home.tsx

@@ -1,7 +1,16 @@
 import { Cpu, Settings, BarChart3, Bell } from "lucide-react";
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+} from "recharts";
+import { Page } from "../App";
 
-export default function Home() {
+export default function Home({ setPage }: { setPage: (page: Page) => void }) {
   // Datos de ejemplo para empresas
   const companies = [
     { name: "Empresa A", tomas: 12, alerts: 2, consumption: 320 },
@@ -18,19 +27,45 @@ export default function Home() {
 
   // Historial tipo Google
   const history = [
-    { user: "GRH", action: "Creó un nuevo medidor", target: "SN001", time: "Hace 5 minutos" },
+    {
-    { user: "CESPT", action: "Actualizó concentrador", target: "Planta 1", time: "Hace 20 minutos" },
+      user: "GRH",
-    { user: "GRH", action: "Eliminó un usuario", target: "Juan Pérez", time: "Hace 1 hora" },
+      action: "Creó un nuevo medidor",
-    { user: "CESPT", action: "Creó un payload", target: "Payload 12", time: "Hace 2 horas" },
+      target: "SN001",
-    { user: "GRH", action: "Actualizó medidor", target: "SN002", time: "Hace 3 horas" },
+      time: "Hace 5 minutos",
+    },
+    {
+      user: "CESPT",
+      action: "Actualizó concentrador",
+      target: "Planta 1",
+      time: "Hace 20 minutos",
+    },
+    {
+      user: "GRH",
+      action: "Eliminó un usuario",
+      target: "Juan Pérez",
+      time: "Hace 1 hora",
+    },
+    {
+      user: "CESPT",
+      action: "Creó un payload",
+      target: "Payload 12",
+      time: "Hace 2 horas",
+    },
+    {
+      user: "GRH",
+      action: "Actualizó medidor",
+      target: "SN002",
+      time: "Hace 3 horas",
+    },
   ];
 
   return (
     <div className="flex flex-col p-6 gap-8 w-full">
-
       {/* Título */}
       <div>
-        <h1 className="text-3xl font-bold text-gray-800">Sistema de Tomas de Agua</h1>
+        <h1 className="text-3xl font-bold text-gray-800">
+          Sistema de Tomas de Agua
+        </h1>
         <p className="text-gray-600 mt-2">
           Monitorea, administra y controla tus operaciones en un solo lugar.
         </p>
@@ -38,7 +73,10 @@ export default function Home() {
 
       {/* Cards de Secciones */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 transition">
+        <div
+          className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 transition"
+          onClick={() => setPage("meters")}
+        >
           <Cpu size={40} className="text-blue-600" />
           <span className="font-semibold text-gray-700">Tomas</span>
         </div>
@@ -64,8 +102,14 @@ export default function Home() {
             className="bg-white rounded-xl shadow p-4 flex flex-col gap-1"
           >
             <span className="text-gray-500 text-sm">{c.name}</span>
-            <span className="text-2xl font-bold text-gray-800">{c.tomas} Tomas</span>
+            <span className="text-2xl font-bold text-gray-800">
-            <span className={`text-sm font-medium ${c.alerts > 0 ? "text-red-500" : "text-green-500"}`}>
+              {c.tomas} Tomas
+            </span>
+            <span
+              className={`text-sm font-medium ${
+                c.alerts > 0 ? "text-red-500" : "text-green-500"
+              }`}
+            >
               {c.alerts} Alertas
             </span>
           </div>
@@ -74,10 +118,15 @@ export default function Home() {
 
       {/* 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</h2>
+        <h2 className="text-lg font-semibold mb-4">
+          Consumo de Agua por Empresa
+        </h2>
         <div className="h-60">
           <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={companies} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+            <BarChart
+              data={companies}
+              margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+            >
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="name" />
               <YAxis />
@@ -97,7 +146,8 @@ export default function Home() {
               <span className="text-gray-400 mt-1">•</span>
               <div className="flex-1">
                 <p className="text-sm text-gray-700">
-                  <span className="font-semibold">{h.user}</span> {h.action} <span className="font-medium">{h.target}</span>
+                  <span className="font-semibold">{h.user}</span> {h.action}{" "}
+                  <span className="font-medium">{h.target}</span>
                 </p>
                 <p className="text-xs text-gray-400">{h.time}</p>
               </div>
@@ -112,13 +162,14 @@ export default function Home() {
         <ul className="divide-y divide-gray-200">
           {alerts.map((a, i) => (
             <li key={i} className="py-2 flex justify-between">
-              <span>{a.company} - {a.type}</span>
+              <span>
+                {a.company} - {a.type}
+              </span>
               <span className="text-red-500 font-medium">{a.time}</span>
             </li>
           ))}
         </ul>
       </div>
-
     </div>
   );
 }