Merge branch 'main' of github.com:luanngel/water-project

src/App.tsx

@@ -9,13 +9,19 @@ import ProjectsPage from "./pages/projects/ProjectsPage";
 import UsersPage from "./pages/UsersPage";
 import RolesPage from "./pages/RolesPage";
 import ProfileModal from "./components/layout/common/ProfileModal";
-import { uploadMyAvatar, updateMyProfile } from "./api/me";
+import { updateMyProfile } from "./api/me";
 
 import SettingsModal, {
   type AppSettings,
   loadSettings,
 } from "./components/SettingsModals";
 
+import LoginPage from "./pages/LoginPage";
+
+// ✅ NUEVO
+import ConfirmModal from "./components/layout/common/ConfirmModal";
+import Watermark from "./components/layout/common/Watermark";
+
 export type Page =
   | "home"
   | "projects"
@@ -24,12 +30,38 @@ export type Page =
   | "users"
   | "roles";
 
+const AUTH_KEY = "grh_auth";
+
 export default function App() {
+  const [isAuth, setIsAuth] = useState<boolean>(() => {
+    return Boolean(localStorage.getItem(AUTH_KEY));
+  });
+
+  const handleLogin = (payload?: { token?: string }) => {
+    localStorage.setItem(
+      AUTH_KEY,
+      JSON.stringify({ token: payload?.token ?? "demo", ts: Date.now() })
+    );
+    setIsAuth(true);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem(AUTH_KEY);
+    setIsAuth(false);
+    // opcional: reset de navegación
+    setPage("home");
+    setSubPage("default");
+    setSelectedProject("");
+  };
+
+  // ✅ confirm logout modal state
+  const [logoutOpen, setLogoutOpen] = useState(false);
+  const [loggingOut, setLoggingOut] = useState(false);
+
   const [page, setPage] = useState<Page>("home");
   const [subPage, setSubPage] = useState<string>("default");
   const [selectedProject, setSelectedProject] = useState<string>("");
 
-  // ✅ perfil usuario + modal
   const [profileOpen, setProfileOpen] = useState(false);
   const [savingProfile, setSavingProfile] = useState(false);
 
@@ -37,29 +69,24 @@ export default function App() {
     name: "CESPT Admin",
     email: "admin@cespt.gob.mx",
     avatarUrl: null as string | null,
-    organismName: "CESPT", // ✅ NUEVO: Empresa/Organismo
+    organismName: "CESPT",
   });
 
-  // Settings state
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settings, setSettings] = useState<AppSettings>(() => loadSettings());
 
   const navigateToMetersWithProject = (projectName: string) => {
     setSelectedProject(projectName);
-    setSubPage(projectName); // útil para breadcrumb si lo usas
+    setSubPage(projectName);
     setPage("meters");
   };
 
-  // ✅ handlers
   const handleUploadAvatar = async (file: File) => {
-    // 1) Guardar como base64 en localStorage (demo)
     const base64 = await fileToBase64(file);
-    localStorage.setItem("mock_avatar", base64 as string);
-  
-    // 2) Guardar en state para que se vea inmediato
-    setUser((prev) => ({ ...prev, avatarUrl: base64 as string }));
+    localStorage.setItem("mock_avatar", base64);
+    setUser((prev) => ({ ...prev, avatarUrl: base64 }));
   };
-  
+
   function fileToBase64(file: File) {
     return new Promise<string>((resolve, reject) => {
       const reader = new FileReader();
@@ -69,7 +96,6 @@ export default function App() {
     });
   }
 
-  // ✅ ahora también recibe organismName
   const handleSaveProfile = async (next: {
     name: string;
     email: string;
@@ -81,11 +107,11 @@ export default function App() {
 
       setUser((prev) => ({
         ...prev,
-        // si backend regresa valores, los usamos; si no, usamos "next" o lo anterior
         name: updated.name ?? next.name ?? prev.name,
         email: updated.email ?? next.email ?? prev.email,
         avatarUrl: updated.avatarUrl ?? prev.avatarUrl,
-        organismName: updated.organismName ?? next.organismName ?? prev.organismName,
+        organismName:
+          updated.organismName ?? next.organismName ?? prev.organismName,
       }));
 
       setProfileOpen(false);
@@ -94,7 +120,6 @@ export default function App() {
     }
   };
 
-  // Aplica theme al cargar / cambiar (para cubrir refresh)
   useEffect(() => {
     const root = document.documentElement;
     root.classList.remove("dark");
@@ -134,15 +159,17 @@ export default function App() {
     }
   };
 
+  if (!isAuth) {
+    return <LoginPage onSuccess={handleLogin} />;
+  }
+
   return (
-    // Blindaje global del layout
     <div
       className={[
         "flex h-screen w-full overflow-hidden",
         settings.compactMode ? "text-sm" : "",
       ].join(" ")}
     >
-      {/* Sidebar no debe encogerse */}
       <div className="shrink-0">
         <Sidebar
           setPage={(p) => {
@@ -153,29 +180,28 @@ export default function App() {
         />
       </div>
 
-      {/* min-w-0: evita que páginas anchas (tablas) empujen el layout */}
       <div className="flex min-w-0 flex-1 flex-col">
         <div className="shrink-0">
           <TopMenu
             page={page}
             subPage={subPage}
             setSubPage={setSubPage}
-            setPage={setPage}
-            onOpenSettings={() => setSettingsOpen(true)}
-            // props de perfil
             userName={user.name}
             userEmail={user.email}
             avatarUrl={user.avatarUrl}
             onOpenProfile={() => setProfileOpen(true)}
-            onUploadAvatar={handleUploadAvatar}
+            // ✅ en vez de cerrar, abrimos confirm modal
+            onRequestLogout={() => setLogoutOpen(true)}
           />
         </div>
 
-        {/* Scroll solo aquí */}
-        <main className="min-w-0 flex-1 overflow-auto">{renderPage()}</main>
+        {/* ✅ AQUÍ VA LA MARCA DE AGUA */}
+        <main className="relative min-w-0 flex-1 overflow-auto">
+          <Watermark />
+          <div className="relative z-10">{renderPage()}</div>
+        </main>
       </div>
 
-      {/* Settings modal */}
       <SettingsModal
         open={settingsOpen}
         onClose={() => setSettingsOpen(false)}
@@ -183,19 +209,39 @@ export default function App() {
         setSettings={setSettings}
       />
 
-      {/* ✅ Profile modal (con avatar + cambiar img + empresa) */}
       <ProfileModal
         open={profileOpen}
         loading={savingProfile}
-        avatarUrl={user.avatarUrl} // ✅ NUEVO
+        avatarUrl={user.avatarUrl}
         initial={{
           name: user.name,
           email: user.email,
-          organismName: user.organismName, // ✅ NUEVO
+          organismName: user.organismName,
         }}
         onClose={() => setProfileOpen(false)}
         onSave={handleSaveProfile}
-        onUploadAvatar={handleUploadAvatar} // ✅ NUEVO (botón Cambiar img en modal)
+        onUploadAvatar={handleUploadAvatar}
+      />
+
+      {/* ✅ ConfirmModal: Cerrar sesión */}
+      <ConfirmModal
+        open={logoutOpen}
+        title="Cerrar sesión"
+        message="¿Estás seguro que deseas cerrar sesión?"
+        confirmText="Cerrar sesión"
+        cancelText="Cancelar"
+        danger
+        loading={loggingOut}
+        onClose={() => setLogoutOpen(false)}
+        onConfirm={async () => {
+          setLoggingOut(true);
+          try {
+            handleLogout();
+            setLogoutOpen(false);
+          } finally {
+            setLoggingOut(false);
+          }
+        }}
       />
     </div>
   );

src/components/layout/TopMenu.tsx

@@ -10,8 +10,10 @@ interface TopMenuProps {
   userEmail?: string;
   avatarUrl?: string | null;
 
-  onLogout?: () => void;
   onOpenProfile?: () => void;
+
+  // ✅ NUEVO: en vez de cerrar, pedimos confirmación desde App
+  onRequestLogout?: () => void;
 }
 
 const TopMenu: React.FC<TopMenuProps> = ({
@@ -23,11 +25,10 @@ const TopMenu: React.FC<TopMenuProps> = ({
   userEmail,
   avatarUrl = null,
 
-  onLogout,
   onOpenProfile,
+  onRequestLogout,
 }) => {
   const [openUserMenu, setOpenUserMenu] = useState(false);
-
   const menuRef = useRef<HTMLDivElement | null>(null);
 
   const initials = useMemo(() => {
@@ -37,7 +38,6 @@ const TopMenu: React.FC<TopMenuProps> = ({
     return (a + b).toUpperCase();
   }, [userName]);
 
-  // Cerrar al click afuera
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
       if (!openUserMenu) return;
@@ -48,7 +48,6 @@ const TopMenu: React.FC<TopMenuProps> = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [openUserMenu]);
 
-  // Cerrar con ESC
   useEffect(() => {
     function handleEsc(e: KeyboardEvent) {
       if (e.key === "Escape") setOpenUserMenu(false);
@@ -117,12 +116,8 @@ const TopMenu: React.FC<TopMenuProps> = ({
               role="menu"
               className="
                 absolute right-0 mt-2 w-80
-                rounded-2xl
-                bg-white
-                border border-slate-200
-                shadow-xl
-                overflow-hidden
-                z-50
+                rounded-2xl bg-white border border-slate-200
+                shadow-xl overflow-hidden z-50
               "
             >
               {/* Header usuario */}
@@ -157,7 +152,6 @@ const TopMenu: React.FC<TopMenuProps> = ({
                 </div>
               </div>
 
-              {/* Items (solo 2) */}
               <MenuItem
                 label="Ver / editar perfil"
                 onClick={() => {
@@ -174,11 +168,7 @@ const TopMenu: React.FC<TopMenuProps> = ({
                 tone="danger"
                 onClick={() => {
                   setOpenUserMenu(false);
-                  if (onLogout) onLogout();
-                  else {
-                    localStorage.removeItem("token");
-                    window.location.href = "/login";
-                  }
+                  onRequestLogout?.(); // ✅ abre confirm modal en App
                 }}
                 left={<LogOut size={16} />}
               />
@@ -225,4 +215,3 @@ function MenuItem({
 }
 
 export default TopMenu;
-

src/components/layout/common/ProfileModal.tsx

@@ -54,12 +54,17 @@ export default function ProfileModal({
   // Limpieza de object URLs
   useEffect(() => {
     return () => {
-      if (lastPreviewUrlRef.current) URL.revokeObjectURL(lastPreviewUrlRef.current);
+      if (lastPreviewUrlRef.current) {
+        URL.revokeObjectURL(lastPreviewUrlRef.current);
+      }
     };
   }, []);
 
   const initials = useMemo(() => {
-    const parts = (name || "").trim().split(/\s+/).filter(Boolean);
+    const parts = (name || "")
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean);
     const a = parts[0]?.[0] ?? "U";
     const b = parts[1]?.[0] ?? "";
     return (a + b).toUpperCase();
@@ -148,7 +153,9 @@ export default function ProfileModal({
         <div className="rounded-2xl bg-white shadow-xl border border-slate-200 overflow-hidden">
           {/* Header */}
           <div className="px-6 py-4 border-b border-slate-200">
-            <div className="text-base font-semibold text-slate-900">Editar perfil</div>
+            <div className="text-base font-semibold text-slate-900">
+              Editar perfil
+            </div>
           </div>
 
           {/* Body */}
@@ -206,7 +213,6 @@ export default function ProfileModal({
 
               {/* RIGHT: Form */}
               <div className="rounded-2xl border border-slate-200 p-5">
-                {/* “correo electronico” como en tu dibujo */}
                 <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
                   correo electrónico
                 </div>
@@ -253,20 +259,20 @@ export default function ProfileModal({
             >
               Cancelar
             </button>
-            <button
-  type="button"
-  onClick={handleSubmit}
-  disabled={loading}
-  className={[
-    "rounded-xl px-4 py-2 text-sm font-semibold",
-    "bg-blue-600 text-white hover:bg-blue-700",
-    "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
-    loading ? "opacity-60 cursor-not-allowed" : "",
-  ].join(" ")}
->
-  {loading ? "Guardando..." : "Guardar"}
-</button>
 
+            <button
+              type="button"
+              onClick={handleSubmit}
+              disabled={loading}
+              className={[
+                "rounded-xl px-4 py-2 text-sm font-semibold",
+                "bg-blue-600 text-white hover:bg-blue-700",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                loading ? "opacity-60 cursor-not-allowed" : "",
+              ].join(" ")}
+            >
+              {loading ? "Guardando..." : "Guardar"}
+            </button>
           </div>
         </div>
       </div>

src/components/layout/common/Watermark.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import grhWatermark from "../../../assets/images/grhWatermark.png";
+
+export default function Watermark({
+  opacity = 0.08,
+  size = 520,
+}: {
+  opacity?: number;
+  size?: number;
+}) {
+  return (
+    <div className="pointer-events-none fixed inset-0 z-20 overflow-hidden">
+      {/* Marca centrada (SIN rotación) */}
+      <div
+        className="absolute left-1/2 top-1/2"
+        style={{
+          transform: "translate(-50%, -50%)",
+          opacity,
+        }}
+      >
+        <img
+          src={grhWatermark}
+          alt="GRH Watermark"
+          width={size}
+          height={size}
+          className="select-none object-contain"
+          draggable={false}
+          style={{ filter: "grayscale(100%)" }} // opcional
+        />
+      </div>
+
+      {/* Marca secundaria (SIN rotación) */}
+      <div
+        className="absolute right-[-140px] bottom-[-180px]"
+        style={{
+          opacity: Math.max(0.04, opacity * 0.55),
+        }}
+      >
+        <img
+          src={grhWatermark}
+          alt="GRH Watermark"
+          width={Math.round(size * 0.75)}
+          height={Math.round(size * 0.75)}
+          className="select-none object-contain"
+          draggable={false}
+          style={{ filter: "grayscale(100%)" }} // opcional
+        />
+      </div>
+    </div>
+  );
+}

src/pages/Home.tsx

@@ -11,7 +11,7 @@ import {
 } from "recharts";
 import { fetchMeters, type Meter } from "../api/meters";
 import type { Page } from "../App";
-import grhWatermark from "../assets/images/grhWatermark.jpg";
+import grhWatermark from "../assets/images/grhWatermark.png";
 
 /* ================= TYPES ================= */
 

src/pages/LoginPage.tsx

@@ -0,0 +1,218 @@
+import { useMemo, useState } from "react";
+import { Lock, User, Eye, EyeOff, Loader2, Check } from "lucide-react";
+import grhWatermark from "../assets/images/grhWatermark.png";
+
+type Form = { usuario: string; contrasena: string };
+
+type LoginPageProps = {
+  onSuccess: (payload?: { token?: string }) => void;
+};
+
+export default function LoginPage({ onSuccess }: LoginPageProps) {
+  const [form, setForm] = useState<Form>({ usuario: "", contrasena: "" });
+  const [showPass, setShowPass] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [serverError, setServerError] = useState("");
+  const [notRobot, setNotRobot] = useState(false);
+
+  const errors = useMemo(() => {
+    const e: Partial<Record<keyof Form | "robot", string>> = {};
+    if (!form.usuario.trim()) e.usuario = "El usuario es obligatorio.";
+    if (!form.contrasena) e.contrasena = "La contraseña es obligatoria.";
+    if (!notRobot) e.robot = "Confirma que no eres un robot.";
+    return e;
+  }, [form.usuario, form.contrasena, notRobot]);
+
+  const canSubmit = Object.keys(errors).length === 0 && !loading;
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setServerError("");
+    if (!canSubmit) return;
+
+    try {
+      setLoading(true);
+      await new Promise((r) => setTimeout(r, 700));
+      onSuccess({ token: "demo" });
+    } catch {
+      setServerError("No se pudo iniciar sesión. Verifica tus datos.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  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="absolute left-0 top-0 h-[3px] w-full opacity-90"
+          style={{
+            background:
+              "linear-gradient(90deg, transparent, rgba(86,107,184,0.9), rgba(76,95,158,0.9), transparent)",
+          }}
+        />
+
+        <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%)",
+              }}
+            />
+
+            <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">
+                <div className="flex items-center gap-4">
+                  <img
+                    src={grhWatermark}
+                    alt="GRH"
+                    className="h-20 w-20 object-contain rounded-lg"
+                  />
+                  <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>
+                </div>
+
+                <form onSubmit={onSubmit} className="mt-8 space-y-6">
+                  {serverError && (
+                    <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                      {serverError}
+                    </div>
+                  )}
+
+                  {/* Usuario */}
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700">
+                      Usuario
+                    </label>
+                    <div className="relative mt-2">
+                      <input
+                        value={form.usuario}
+                        onChange={(e) =>
+                          setForm((s) => ({ ...s, usuario: e.target.value }))
+                        }
+                        className="w-full border-b border-slate-300 py-2 pr-10 outline-none focus:border-slate-600"
+                      />
+                      <User
+                        className="absolute right-1 top-1/2 -translate-y-1/2 text-slate-500"
+                        size={18}
+                      />
+                    </div>
+                    {errors.usuario && (
+                      <p className="mt-1 text-xs text-red-600">
+                        {errors.usuario}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Contraseña */}
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700">
+                      Contraseña
+                    </label>
+                    <div className="relative mt-2">
+                      <input
+                        value={form.contrasena}
+                        onChange={(e) =>
+                          setForm((s) => ({ ...s, contrasena: 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"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPass((v) => !v)}
+                        className="absolute right-8 top-1/2 -translate-y-1/2 text-slate-500"
+                      >
+                        {showPass ? <EyeOff size={18} /> : <Eye size={18} />}
+                      </button>
+                      <Lock
+                        className="absolute right-1 top-1/2 -translate-y-1/2 text-slate-500"
+                        size={18}
+                      />
+                    </div>
+                    {errors.contrasena && (
+                      <p className="mt-1 text-xs text-red-600">
+                        {errors.contrasena}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* NO SOY UN ROBOT */}
+                  <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+                    <button
+                      type="button"
+                      onClick={() => setNotRobot((v) => !v)}
+                      className={`h-5 w-5 rounded border flex items-center justify-center ${
+                        notRobot
+                          ? "bg-blue-600 border-blue-600 text-white"
+                          : "bg-white border-slate-300"
+                      }`}
+                    >
+                      {notRobot && <Check size={14} />}
+                    </button>
+                    <span className="text-sm text-slate-700">No soy un robot</span>
+                    <span className="ml-auto text-xs text-slate-400">
+                      reCAPTCHA
+                    </span>
+                  </div>
+
+                  {errors.robot && (
+                    <p className="text-xs text-red-600">{errors.robot}</p>
+                  )}
+
+                  {/* Botón */}
+                  <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"
+                  >
+                    {loading ? (
+                      <>
+                        <Loader2 className="animate-spin" size={18} />
+                        Entrando...
+                      </>
+                    ) : (
+                      "Iniciar sesión"
+                    )}
+                  </button>
+                </form>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}