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

Improve dark mode with Zinc color palette

Browse Source 
- Change from gray to zinc colors for a neutral cool aesthetic
- Use zinc-950 for main background, zinc-900 for cards
- Add subtle borders to cards in dark mode for better separation
- Update all components: Home, TopMenu, connector pages
- More elegant and minimalist dark mode appearance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Exteban08
2026-02-03 11:51:03 +00:00
parent 9b8d6c4e45
commit c741b697d9
9 changed files with 217 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -254,7 +254,7 @@ export default function App() {
</div>
{/* ✅ AQUÍ VA LA MARCA DE AGUA */}
<main className="relative min-w-0 flex-1 overflow-auto bg-slate-50 dark:bg-gray-900">
<main className="relative min-w-0 flex-1 overflow-auto bg-slate-50 dark:bg-zinc-950">
<Watermark />
<div className="relative z-10">{renderPage()}</div>
</main>

20
src/components/layout/TopMenu.tsx
View File

@@ -180,14 +180,14 @@ const TopMenu: React.FC<TopMenuProps> = ({
role="menu"
className="
absolute right-0 mt-2 w-80
rounded-2xl bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700
rounded-2xl bg-white dark:bg-zinc-900 border border-slate-200 dark:border-zinc-800
shadow-xl overflow-hidden z-50
"
>
{/* Header usuario */}
<div className="px-5 py-4 border-b border-slate-200 dark:border-gray-700">
<div className="px-5 py-4 border-b border-slate-200 dark:border-zinc-800">
<div className="flex items-center gap-3">
<div className="w-11 h-11 rounded-full bg-slate-100 dark:bg-gray-700 overflow-hidden flex items-center justify-center">
<div className="w-11 h-11 rounded-full bg-slate-100 dark:bg-zinc-800 overflow-hidden flex items-center justify-center">
{avatarUrl ? (
<img
src={avatarUrl}
@@ -195,7 +195,7 @@ const TopMenu: React.FC<TopMenuProps> = ({
className="w-full h-full object-cover"
/>
) : (
<span className="text-sm font-semibold text-slate-700 dark:text-gray-200">
<span className="text-sm font-semibold text-slate-700 dark:text-zinc-200">
{initials}
</span>
)}
@@ -206,11 +206,11 @@ const TopMenu: React.FC<TopMenuProps> = ({
{userName}
</div>
{userEmail ? (
<div className="text-xs text-slate-500 dark:text-gray-400 truncate">
<div className="text-xs text-slate-500 dark:text-zinc-400 truncate">
{userEmail}
</div>
) : (
<div className="text-xs text-slate-400 dark:text-gray-500 truncate">—</div>
<div className="text-xs text-slate-400 dark:text-zinc-500 truncate">—</div>
)}
</div>
</div>
@@ -225,7 +225,7 @@ const TopMenu: React.FC<TopMenuProps> = ({
left={<User size={16} />}
/>
<div className="h-px bg-slate-200 dark:bg-gray-700 my-1" />
<div className="h-px bg-slate-200 dark:bg-zinc-800 my-1" />
<MenuItem
label="Cerrar sesión"
@@ -266,13 +266,13 @@ function MenuItem({
className={[
"w-full flex items-center gap-3 px-5 py-3 text-sm text-left",
"transition-colors",
disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-slate-100 dark:hover:bg-gray-700",
disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-slate-100 dark:hover:bg-zinc-800",
tone === "danger"
? "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
: "text-slate-700 dark:text-gray-200",
: "text-slate-700 dark:text-zinc-200",
].join(" ")}
>
<span className="text-slate-400 dark:text-gray-500">{left}</span>
<span className="text-slate-400 dark:text-zinc-500">{left}</span>
<span className="font-medium">{label}</span>
</button>
);

2
src/hooks/useNotifications.ts
View File

@@ -32,7 +32,7 @@ export function useNotifications(autoRefreshInterval: number = 30000): UseNotifi
const [hasMore, setHasMore] = useState<boolean>(false);
const [page, setPage] = useState<number>(1);
const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
const refreshIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const fetchNotifications = useCallback(async (filters?: NotificationFilters) => {
try {

4
src/index.css
View File

@@ -14,10 +14,10 @@
/* Dark mode body */
body {
@apply bg-slate-50 text-gray-900;
@apply bg-slate-50 text-zinc-900;
}
.dark body,
body:where(.dark *) {
@apply bg-gray-900 text-gray-100;
@apply bg-zinc-950 text-zinc-100;
}

98
src/pages/Home.tsx
View File

@@ -395,7 +395,7 @@ export default function Home({
<h1 className="text-3xl font-bold text-gray-800 dark:text-white">
Sistema de Tomas de Agua
</h1>
<p className="text-gray-600 dark:text-gray-300 mt-2">
<p className="text-gray-600 dark:text-zinc-300 mt-2">
Monitorea, administra y controla tus operaciones en un solo lugar.
</p>
</div>
@@ -412,42 +412,42 @@ 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 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"
className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 dark:hover:bg-zinc-800 transition cursor-pointer"
onClick={() => setPage("meters")}
>
<Cpu size={40} className="text-blue-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Tomas</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Tomas</span>
</div>
<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"
className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-red-50 dark:hover:bg-zinc-800 transition cursor-pointer"
onClick={() => setPage("auditoria")}
>
<Bell size={40} className="text-red-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Alertas</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Alertas</span>
</div>
<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"
<div className="cursor-pointer bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 dark:hover:bg-zinc-800 transition"
onClick={() => setPage("projects")}
>
<Settings size={40} className="text-yellow-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Proyectos</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Proyectos</span>
</div>
<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">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 dark:hover:bg-zinc-800 transition">
<BarChart3 size={40} className="text-green-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Reportes</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Reportes</span>
</div>
</div>
{isAdmin && (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-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 dark:text-gray-400">Organismos Operadores</p>
<p className="text-xs text-gray-400 dark:text-gray-500">
<p className="text-sm text-gray-500 dark:text-zinc-400">Organismos Operadores</p>
<p className="text-xs text-gray-400 dark:text-zinc-500">
Seleccionado:{" "}
<span className="font-semibold dark:text-gray-300">
<span className="font-semibold dark:text-zinc-300">
{selectedOrganism === "Todos"
? "Todos"
: organismsData.find(o => o.id === selectedOrganism)?.name || "Ninguno"}
@@ -476,21 +476,21 @@ export default function Home({
/>
{/* Panel */}
<div className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl flex flex-col">
<div className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-zinc-900 rounded-xl shadow-2xl flex flex-col">
{/* Header */}
<div className="p-5 border-b dark:border-gray-700 flex items-start justify-between gap-3">
<div className="p-5 border-b dark:border-zinc-800 flex items-start justify-between gap-3">
<div>
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
Organismos Operadores
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
<p className="text-sm text-gray-500 dark:text-zinc-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 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300"
className="rounded-lg px-3 py-2 text-sm border border-gray-300 dark:border-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-800 dark:text-zinc-300"
onClick={() => {
setShowOrganisms(false);
setOrganismQuery("");
@@ -501,12 +501,12 @@ export default function Home({
</div>
{/* Search */}
<div className="p-5 border-b dark:border-gray-700">
<div className="p-5 border-b dark:border-zinc-800">
<input
value={organismQuery}
onChange={(e) => setOrganismQuery(e.target.value)}
placeholder="Buscar organismo…"
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"
className="w-full rounded-lg border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 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>
@@ -523,7 +523,7 @@ export default function Home({
"rounded-xl border p-4 transition",
selectedOrganism === "Todos"
? "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",
: "border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700",
].join(" ")}
>
<div className="flex items-start justify-between gap-3">
@@ -531,7 +531,7 @@ export default function Home({
<p className="text-sm font-semibold text-gray-800 dark:text-white">
Todos los Organismos
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Ver todos los datos del sistema</p>
<p className="text-xs text-gray-500 dark:text-zinc-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">
@@ -569,7 +569,7 @@ export default function Home({
"rounded-xl border p-4 transition",
active
? "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",
: "border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700",
].join(" ")}
>
<div className="flex items-start justify-between gap-3">
@@ -577,7 +577,7 @@ export default function Home({
<p className="text-sm font-semibold text-gray-800 dark:text-white">
{o.name}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{o.region}</p>
<p className="text-xs text-gray-500 dark:text-zinc-400">{o.region}</p>
</div>
<span
@@ -594,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 dark:text-gray-400">Rol</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Rol</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.contact}
</span>
</div>
<div className="flex justify-between gap-2">
<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]">
<span className="text-gray-500 dark:text-zinc-400">Email</span>
<span className="font-medium text-gray-800 dark:text-zinc-200 truncate max-w-[200px]">
{o.region}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Proyectos</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Proyectos</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.projects}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Medidores</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Medidores</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.meters}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Último acceso</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Último acceso</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.lastSync}
</span>
</div>
@@ -654,14 +654,14 @@ export default function Home({
)}
{!loadingUsers && filteredOrganisms.length === 0 && (
<div className="text-sm text-gray-500 dark:text-gray-400 text-center py-10">
<div className="text-sm text-gray-500 dark:text-zinc-400 text-center py-10">
No se encontraron organismos.
</div>
)}
</div>
{/* Footer */}
<div className="p-5 border-t dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
<div className="p-5 border-t dark:border-zinc-800 text-xs text-gray-500 dark:text-zinc-400">
Mostrando {filteredOrganisms.length} organismo{filteredOrganisms.length !== 1 ? 's' : ''} de {users.length} total{users.length !== 1 ? 'es' : ''}
</div>
</div>
@@ -672,7 +672,7 @@ export default function Home({
</div>
{/* Gráfica */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6">
<div className="flex items-center justify-between gap-4 mb-4">
<h2 className="text-lg font-semibold dark:text-white">
Numero de Medidores por Proyecto
@@ -684,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 dark:text-gray-400 mb-2">
<p className="text-sm text-gray-500 dark:text-zinc-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 dark:text-gray-500">
Proyecto asignado: <span className="font-semibold dark:text-gray-300">{selectedUserProjectName}</span>
<p className="text-xs text-gray-400 dark:text-zinc-500">
Proyecto asignado: <span className="font-semibold dark:text-zinc-300">{selectedUserProjectName}</span>
</p>
)}
</div>
) : chartData.length === 0 ? (
<div className="h-60 flex items-center justify-center">
<p className="text-sm text-gray-500 dark:text-gray-400">No hay datos disponibles</p>
<p className="text-sm text-gray-500 dark:text-zinc-400">No hay datos disponibles</p>
</div>
) : (
<>
@@ -718,14 +718,14 @@ export default function Home({
</div>
{selectedOrganism !== "Todos" && selectedUserProjectName && (
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-zinc-800">
<div className="flex items-center justify-between text-sm">
<div>
<span className="text-gray-500 dark:text-gray-400">Proyecto del organismo:</span>
<span className="text-gray-500 dark:text-zinc-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 dark:text-gray-400">Total de medidores:</span>
<span className="text-gray-500 dark:text-zinc-400">Total de medidores:</span>
<span className="ml-2 font-semibold text-blue-600">{filteredMeters.length}</span>
</div>
</div>
@@ -736,7 +736,7 @@ export default function Home({
</div>
{!isOperator && (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-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">
@@ -747,12 +747,12 @@ export default function Home({
No hay registros de auditoría disponibles
</p>
) : (
<ul className="divide-y divide-gray-200 dark:divide-gray-700 max-h-60 overflow-y-auto">
<ul className="divide-y divide-gray-200 dark:divide-zinc-800 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 dark:text-gray-300">
<p className="text-sm text-gray-700 dark:text-zinc-300">
<span className="font-semibold">{h.user}</span> {h.action}{" "}
<span className="font-medium">{h.target}</span>
</p>
@@ -766,7 +766,7 @@ export default function Home({
)}
{!isOperator && (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-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">
@@ -777,11 +777,11 @@ export default function Home({
No hay alertas disponibles
</p>
) : (
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
<ul className="divide-y divide-gray-200 dark:divide-zinc-800">
{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 dark:text-gray-300">
<span className="text-sm text-gray-700 dark:text-zinc-300">
<span className="font-semibold">{a.company}</span> - {a.type}
</span>
</div>

145
src/pages/LoginPage.tsx
View File

@@ -32,7 +32,6 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
setLoading(true);
try {
await login({ email: form.email, password: form.password });
// Tokens are stored by the auth module
onSuccess();
} catch (err) {
setServerError(err instanceof Error ? err.message : "Error de autenticación");
@@ -42,131 +41,135 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
}
return (
<div className="h-screen w-screen font-sans bg-slate-50">
<div className="relative h-full w-full overflow-hidden bg-white">
<div className="fixed inset-0 w-screen h-screen font-sans">
{/* Imagen de fondo - agua */}
<div
className="absolute left-0 top-0 h-[3px] w-full opacity-90"
className="absolute inset-0 w-full h-full bg-cover bg-center"
style={{
background:
"linear-gradient(90deg, transparent, rgba(86,107,184,0.9), rgba(76,95,158,0.9), transparent)",
backgroundImage: `url('https://images.unsplash.com/photo-1500375592092-40eb2168fd21?q=80&w=2088&auto=format&fit=crop')`,
}}
/>
<div className="grid h-full grid-cols-1 md:grid-cols-2">
{/* IZQUIERDA */}
<section className="relative overflow-hidden">
<div
className="absolute inset-0"
style={{
background:
"linear-gradient(135deg, #2a355d 10%, #4c5f9e 55%, #566bb8 100%)",
}}
/>
{/* Overlay oscuro */}
<div className="absolute inset-0 bg-black/50" />
<div
className="absolute inset-0"
style={{
clipPath: "polygon(0 0, 80% 0, 55% 100%, 0 100%)",
background:
"linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02))",
}}
/>
<div className="relative h-full flex items-center px-10 md:px-12">
<div className="max-w-sm text-white">
<h2 className="text-4xl font-semibold tracking-tight">
¡Bienvenido!
</h2>
<p className="mt-3 text-sm leading-relaxed text-white/90">
Ingresa con tus credenciales para acceder al panel GRH.
</p>
</div>
</div>
</section>
{/* DERECHA */}
<section className="bg-white flex items-center justify-center">
<div className="w-full max-w-lg px-6">
<div className="rounded-3xl border border-slate-200 bg-white/90 p-10 md:p-12 shadow-lg">
{/* Layout dividido */}
<div className="relative z-10 w-full h-full flex">
{/* Lado izquierdo - Branding */}
<div className="hidden lg:flex lg:w-1/2 h-full flex-col justify-between p-12">
<div className="flex items-center gap-4">
<div className="h-24 w-24 rounded-2xl bg-white/90 backdrop-blur-sm shadow-xl flex items-center justify-center">
<img
src={grhWatermark}
alt="GRH"
className="h-20 w-20 object-contain rounded-lg"
className="h-18 w-18 object-contain"
/>
<div className="leading-tight">
<h1 className="text-2xl font-semibold text-slate-900">
Iniciar sesión
</h1>
<p className="text-xs text-slate-500">
Gestión de Recursos Hídricos
</p>
</div>
<span className="text-white text-4xl font-bold tracking-tight drop-shadow-lg">
GRH
</span>
</div>
<form onSubmit={onSubmit} className="mt-8 space-y-6">
<div className="max-w-xl">
<h1 className="text-6xl font-bold text-white leading-tight drop-shadow-lg">
Gestión de
<br />
Recursos Hídricos
</h1>
<p className="mt-6 text-xl text-white/90 leading-relaxed drop-shadow">
Llevando agua potable a comunidades que más lo necesitan.
Monitoreo inteligente de infraestructura hídrica.
</p>
</div>
<p className="text-white/60 text-sm">
© 2026 GRH. Todos los derechos reservados.
</p>
</div>
{/* Lado derecho - Formulario */}
<div className="w-full lg:w-1/2 h-full flex items-center justify-center p-6">
<div className="w-full max-w-md bg-white rounded-2xl shadow-2xl p-8 md:p-10">
{/* Logo móvil */}
<div className="flex lg:hidden items-center gap-3 mb-8">
<img
src={grhWatermark}
alt="GRH"
className="h-10 w-10 object-contain"
/>
<span className="text-slate-800 text-lg font-semibold">GRH</span>
</div>
<div className="mb-8">
<h2 className="text-2xl font-bold text-slate-900">
Iniciar sesión
</h2>
<p className="mt-2 text-slate-500 text-sm">
Ingresa tus credenciales para acceder al sistema
</p>
</div>
<form onSubmit={onSubmit} className="space-y-5">
{serverError && (
<div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
<div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
{serverError}
</div>
)}
{/* Email */}
<div>
<label className="block text-sm font-medium text-slate-700">
<label className="block text-sm font-medium text-slate-700 mb-1.5">
Correo electrónico
</label>
<div className="relative mt-2">
<div className="relative">
<input
type="email"
value={form.email}
onChange={(e) =>
setForm((s) => ({ ...s, email: e.target.value }))
}
className="w-full border-b border-slate-300 py-2 pr-10 outline-none focus:border-slate-600"
placeholder="usuario@ejemplo.com"
className="w-full rounded-lg border border-slate-300 bg-white px-4 py-3 pr-11 text-slate-900 placeholder-slate-400 outline-none transition-all focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
/>
<Mail
className="absolute right-1 top-1/2 -translate-y-1/2 text-slate-500"
className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400"
size={18}
/>
</div>
{errors.email && (
<p className="mt-1 text-xs text-red-600">
{errors.email}
</p>
<p className="mt-1.5 text-xs text-red-600">{errors.email}</p>
)}
</div>
{/* Contraseña */}
<div>
<label className="block text-sm font-medium text-slate-700">
<label className="block text-sm font-medium text-slate-700 mb-1.5">
Contraseña
</label>
<div className="relative mt-2">
<div className="relative">
<input
value={form.password}
onChange={(e) =>
setForm((s) => ({ ...s, password: e.target.value }))
}
type={showPass ? "text" : "password"}
className="w-full border-b border-slate-300 py-2 pr-16 outline-none focus:border-slate-600"
placeholder="••••••••"
className="w-full rounded-lg border border-slate-300 bg-white px-4 py-3 pr-20 text-slate-900 placeholder-slate-400 outline-none transition-all focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
/>
<button
type="button"
onClick={() => setShowPass((v) => !v)}
className="absolute right-8 top-1/2 -translate-y-1/2 text-slate-500"
className="absolute right-11 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
>
{showPass ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
<Lock
className="absolute right-1 top-1/2 -translate-y-1/2 text-slate-500"
className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400"
size={18}
/>
</div>
{errors.password && (
<p className="mt-1 text-xs text-red-600">
{errors.password}
</p>
<p className="mt-1.5 text-xs text-red-600">{errors.password}</p>
)}
</div>
@@ -174,22 +177,20 @@ export default function LoginPage({ onSuccess }: LoginPageProps) {
<button
type="submit"
disabled={!canSubmit}
className="mt-2 w-full rounded-full bg-gradient-to-r from-[#4c5f9e] to-[#566bb8] py-2.5 text-white shadow-md flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
className="w-full rounded-lg bg-blue-600 py-3 font-semibold text-white shadow-lg transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-[0.98]"
>
{loading ? (
<>
<Loader2 className="animate-spin" size={18} />
Entrando...
<Loader2 className="animate-spin" size={20} />
Ingresando...
</>
) : (
"Iniciar sesión"
"Ingresar"
)}
</button>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
);

8
src/pages/conectores/SHMetersPage.tsx
View File

@@ -13,12 +13,12 @@ export default function SHMetersPage() {
</div>
<div>
<h1 className="text-2xl font-bold text-gray-800 dark:text-white">SH-METERS</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">Conector para medidores SH</p>
<p className="text-sm text-gray-500 dark:text-zinc-400">Conector para medidores SH</p>
</div>
</div>
{/* Content */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800 p-6">
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
@@ -26,10 +26,10 @@ export default function SHMetersPage() {
) : (
<div className="text-center py-12">
<Radio className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">
<h3 className="text-lg font-medium text-gray-700 dark:text-zinc-200 mb-2">
Conector SH-METERS
</h3>
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
<p className="text-gray-500 dark:text-zinc-400 max-w-md mx-auto">
Configuracion e integracion con medidores SH.
Esta seccion esta en desarrollo.
</p>

8
src/pages/conectores/TTSPage.tsx
View File

@@ -13,12 +13,12 @@ export default function TTSPage() {
</div>
<div>
<h1 className="text-2xl font-bold text-gray-800 dark:text-white">TTS</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">The Things Stack - Integracion LoRaWAN</p>
<p className="text-sm text-gray-500 dark:text-zinc-400">The Things Stack - Integracion LoRaWAN</p>
</div>
</div>
{/* Content */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800 p-6">
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
@@ -26,10 +26,10 @@ export default function TTSPage() {
) : (
<div className="text-center py-12">
<Wifi className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">
<h3 className="text-lg font-medium text-gray-700 dark:text-zinc-200 mb-2">
Conector TTS (The Things Stack)
</h3>
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
<p className="text-gray-500 dark:text-zinc-400 max-w-md mx-auto">
Configuracion e integracion con The Things Stack para dispositivos LoRaWAN.
Esta seccion esta en desarrollo.
</p>

8
src/pages/conectores/XMetersPage.tsx
View File

@@ -13,12 +13,12 @@ export default function XMetersPage() {
</div>
<div>
<h1 className="text-2xl font-bold text-gray-800 dark:text-white">XMETERS</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">Conector para medidores X</p>
<p className="text-sm text-gray-500 dark:text-zinc-400">Conector para medidores X</p>
</div>
</div>
{/* Content */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800 p-6">
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
@@ -26,10 +26,10 @@ export default function XMetersPage() {
) : (
<div className="text-center py-12">
<Gauge className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">
<h3 className="text-lg font-medium text-gray-700 dark:text-zinc-200 mb-2">
Conector XMETERS
</h3>
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
<p className="text-gray-500 dark:text-zinc-400 max-w-md mx-auto">
Configuracion e integracion con medidores X.
Esta seccion esta en desarrollo.
</p>