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

Dashboard navigate to meters from Tomas card

Browse Source
This commit is contained in:
Esteban
2025-12-22 01:31:13 -06:00
parent b9d7eab9db
commit ee35944c44
2 changed files with 69 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

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

85
src/pages/Home.tsx
View File

@@ -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", 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" },
{
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",
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-sm font-medium ${c.alerts > 0 ? "text-red-500" : "text-green-500"}`}>
<span className="text-2xl font-bold text-gray-800">
{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>
);
}