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

Add dark/light theme toggle and Conectores section

Browse Source 
- Add theme toggle button in TopMenu with Sun/Moon icons
- Save theme preference to localStorage
- Add dark mode CSS configuration with Tailwind @custom-variant
- Apply dark mode classes to Home.tsx, TopMenu, and connector pages
- Add new Conectores section in sidebar with Cable icon
- Create placeholder pages for SH-METERS, XMETERS, and TTS connectors
- Update App.tsx page types and routing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Exteban08
2026-02-03 11:47:42 +00:00
parent 71623d667f
commit 9b8d6c4e45
8 changed files with 325 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/pages/Home.tsx
View File

@@ -392,10 +392,10 @@ export default function Home({
{/* ✅ Título + logo a la derecha */}
<div className="relative flex items-start justify-between gap-6">
<div className="relative z-10">
<h1 className="text-3xl font-bold text-gray-800">
<h1 className="text-3xl font-bold text-gray-800 dark:text-white">
Sistema de Tomas de Agua
</h1>
<p className="text-gray-600 mt-2">
<p className="text-gray-600 dark:text-gray-300 mt-2">
Monitorea, administra y controla tus operaciones en un solo lugar.
</p>
</div>
@@ -412,41 +412,44 @@ 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 cursor-pointer"
className="bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 dark:hover:bg-gray-700 transition cursor-pointer"
onClick={() => setPage("meters")}
>
<Cpu size={40} className="text-blue-600" />
<span className="font-semibold text-gray-700">Tomas</span>
<span className="font-semibold text-gray-700 dark:text-gray-200">Tomas</span>
</div>
<div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-red-50 transition">
<div
className="bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-red-50 dark:hover:bg-gray-700 transition cursor-pointer"
onClick={() => setPage("auditoria")}
>
<Bell size={40} className="text-red-600" />
<span className="font-semibold text-gray-700">Alertas</span>
<span className="font-semibold text-gray-700 dark:text-gray-200">Alertas</span>
</div>
<div className="cursor-pointer bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 transition"
<div className="cursor-pointer bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 dark:hover:bg-gray-700 transition"
onClick={() => setPage("projects")}
>
<Settings size={40} className="text-yellow-600" />
<span className="font-semibold text-gray-700">Proyectos</span>
<span className="font-semibold text-gray-700 dark:text-gray-200">Proyectos</span>
</div>
<div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 transition">
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 dark:hover:bg-gray-700 transition">
<BarChart3 size={40} className="text-green-600" />
<span className="font-semibold text-gray-700">Reportes</span>
<span className="font-semibold text-gray-700 dark:text-gray-200">Reportes</span>
</div>
</div>
{isAdmin && (
<div className="bg-white rounded-xl shadow p-4">
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div>
<p className="text-sm text-gray-500">Organismos Operadores</p>
<p className="text-xs text-gray-400">
<p className="text-sm text-gray-500 dark:text-gray-400">Organismos Operadores</p>
<p className="text-xs text-gray-400 dark:text-gray-500">
Seleccionado:{" "}
<span className="font-semibold">
{selectedOrganism === "Todos"
? "Todos"
<span className="font-semibold dark:text-gray-300">
{selectedOrganism === "Todos"
? "Todos"
: organismsData.find(o => o.id === selectedOrganism)?.name || "Ninguno"}
</span>
</p>
@@ -473,21 +476,21 @@ export default function Home({
/>
{/* Panel */}
<div className="relative w-full max-w-2xl max-h-[90vh] bg-white rounded-xl shadow-2xl flex flex-col">
<div className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl flex flex-col">
{/* Header */}
<div className="p-5 border-b flex items-start justify-between gap-3">
<div className="p-5 border-b dark:border-gray-700 flex items-start justify-between gap-3">
<div>
<h3 className="text-lg font-semibold text-gray-800">
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
Organismos Operadores
</h3>
<p className="text-sm text-gray-500">
<p className="text-sm text-gray-500 dark:text-gray-400">
Selecciona un organismo para filtrar la información del dashboard
</p>
</div>
<button
type="button"
className="rounded-lg px-3 py-2 text-sm border border-gray-300 hover:bg-gray-50"
className="rounded-lg px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300"
onClick={() => {
setShowOrganisms(false);
setOrganismQuery("");
@@ -498,12 +501,12 @@ export default function Home({
</div>
{/* Search */}
<div className="p-5 border-b">
<div className="p-5 border-b dark:border-gray-700">
<input
value={organismQuery}
onChange={(e) => setOrganismQuery(e.target.value)}
placeholder="Buscar organismo…"
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200"
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-500 dark:placeholder-gray-400"
/>
</div>
@@ -519,16 +522,16 @@ export default function Home({
className={[
"rounded-xl border p-4 transition",
selectedOrganism === "Todos"
? "border-blue-600 bg-blue-50/40"
: "border-gray-200 bg-white hover:bg-gray-50",
? "border-blue-600 bg-blue-50/40 dark:bg-blue-900/20"
: "border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600",
].join(" ")}
>
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-sm font-semibold text-gray-800">
<p className="text-sm font-semibold text-gray-800 dark:text-white">
Todos los Organismos
</p>
<p className="text-xs text-gray-500">Ver todos los datos del sistema</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Ver todos los datos del sistema</p>
</div>
<span className="text-xs font-semibold px-2 py-1 rounded-full bg-blue-100 text-blue-700">
@@ -565,16 +568,16 @@ export default function Home({
className={[
"rounded-xl border p-4 transition",
active
? "border-blue-600 bg-blue-50/40"
: "border-gray-200 bg-white hover:bg-gray-50",
? "border-blue-600 bg-blue-50/40 dark:bg-blue-900/20"
: "border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600",
].join(" ")}
>
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-sm font-semibold text-gray-800">
<p className="text-sm font-semibold text-gray-800 dark:text-white">
{o.name}
</p>
<p className="text-xs text-gray-500">{o.region}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{o.region}</p>
</div>
<span
@@ -591,36 +594,36 @@ export default function Home({
<div className="mt-3 space-y-2 text-xs">
<div className="flex justify-between gap-2">
<span className="text-gray-500">Rol</span>
<span className="font-medium text-gray-800">
<span className="text-gray-500 dark:text-gray-400">Rol</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
{o.contact}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500">Email</span>
<span className="font-medium text-gray-800 truncate max-w-[200px]">
<span className="text-gray-500 dark:text-gray-400">Email</span>
<span className="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[200px]">
{o.region}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500">Proyectos</span>
<span className="font-medium text-gray-800">
<span className="text-gray-500 dark:text-gray-400">Proyectos</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
{o.projects}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500">Medidores</span>
<span className="font-medium text-gray-800">
<span className="text-gray-500 dark:text-gray-400">Medidores</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
{o.meters}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500">Último acceso</span>
<span className="font-medium text-gray-800">
<span className="text-gray-500 dark:text-gray-400">Último acceso</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
{o.lastSync}
</span>
</div>
@@ -651,14 +654,14 @@ export default function Home({
)}
{!loadingUsers && filteredOrganisms.length === 0 && (
<div className="text-sm text-gray-500 text-center py-10">
<div className="text-sm text-gray-500 dark:text-gray-400 text-center py-10">
No se encontraron organismos.
</div>
)}
</div>
{/* Footer */}
<div className="p-5 border-t text-xs text-gray-500">
<div className="p-5 border-t dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
Mostrando {filteredOrganisms.length} organismo{filteredOrganisms.length !== 1 ? 's' : ''} de {users.length} total{users.length !== 1 ? 'es' : ''}
</div>
</div>
@@ -669,10 +672,10 @@ export default function Home({
</div>
{/* Gráfica */}
<div className="bg-white rounded-xl shadow p-6">
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="flex items-center justify-between gap-4 mb-4">
<h2 className="text-lg font-semibold">
Número de Medidores por Proyecto
<h2 className="text-lg font-semibold dark:text-white">
Numero de Medidores por Proyecto
</h2>
<span className="text-xs text-gray-400">
Click en barra para ver tomas
@@ -681,20 +684,20 @@ export default function Home({
{chartData.length === 0 && selectedOrganism !== "Todos" ? (
<div className="h-60 flex flex-col items-center justify-center">
<p className="text-sm text-gray-500 mb-2">
{selectedUserProjectName
? "Este organismo no tiene medidores registrados"
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
{selectedUserProjectName
? "Este organismo no tiene medidores registrados"
: "Este organismo no tiene un proyecto asignado"}
</p>
{selectedUserProjectName && (
<p className="text-xs text-gray-400">
Proyecto asignado: <span className="font-semibold">{selectedUserProjectName}</span>
<p className="text-xs text-gray-400 dark:text-gray-500">
Proyecto asignado: <span className="font-semibold dark:text-gray-300">{selectedUserProjectName}</span>
</p>
)}
</div>
) : chartData.length === 0 ? (
<div className="h-60 flex items-center justify-center">
<p className="text-sm text-gray-500">No hay datos disponibles</p>
<p className="text-sm text-gray-500 dark:text-gray-400">No hay datos disponibles</p>
</div>
) : (
<>
@@ -715,14 +718,14 @@ export default function Home({
</div>
{selectedOrganism !== "Todos" && selectedUserProjectName && (
<div className="mt-4 pt-4 border-t border-gray-200">
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between text-sm">
<div>
<span className="text-gray-500">Proyecto del organismo:</span>
<span className="ml-2 font-semibold text-gray-800">{selectedUserProjectName}</span>
<span className="text-gray-500 dark:text-gray-400">Proyecto del organismo:</span>
<span className="ml-2 font-semibold text-gray-800 dark:text-white">{selectedUserProjectName}</span>
</div>
<div>
<span className="text-gray-500">Total de medidores:</span>
<span className="text-gray-500 dark:text-gray-400">Total de medidores:</span>
<span className="ml-2 font-semibold text-blue-600">{filteredMeters.length}</span>
</div>
</div>
@@ -733,8 +736,8 @@ export default function Home({
</div>
{!isOperator && (
<div className="bg-white rounded-xl shadow p-6">
<h2 className="text-lg font-semibold mb-4">Historial Reciente de Auditoría</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<h2 className="text-lg font-semibold mb-4 dark:text-white">Historial Reciente de Auditoria</h2>
{loadingAuditLogs ? (
<div className="flex items-center justify-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
@@ -744,12 +747,12 @@ export default function Home({
No hay registros de auditoría disponibles
</p>
) : (
<ul className="divide-y divide-gray-200 max-h-60 overflow-y-auto">
<ul className="divide-y divide-gray-200 dark:divide-gray-700 max-h-60 overflow-y-auto">
{history.map((h, i) => (
<li key={i} className="py-2 flex items-start gap-3">
<span className="text-gray-400 mt-1">•</span>
<div className="flex-1">
<p className="text-sm text-gray-700">
<p className="text-sm text-gray-700 dark:text-gray-300">
<span className="font-semibold">{h.user}</span> {h.action}{" "}
<span className="font-medium">{h.target}</span>
</p>
@@ -763,8 +766,8 @@ export default function Home({
)}
{!isOperator && (
<div className="bg-white rounded-xl shadow p-6">
<h2 className="text-lg font-semibold mb-4">Últimas Alertas</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<h2 className="text-lg font-semibold mb-4 dark:text-white">Ultimas Alertas</h2>
{loadingNotifications ? (
<div className="flex items-center justify-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
@@ -774,11 +777,11 @@ export default function Home({
No hay alertas disponibles
</p>
) : (
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{alerts.map((a, i) => (
<li key={i} className="py-2 flex justify-between items-start">
<div className="flex-1">
<span className="text-sm text-gray-700">
<span className="text-sm text-gray-700 dark:text-gray-300">
<span className="font-semibold">{a.company}</span> - {a.type}
</span>
</div>