From b86e5111821106246bcfeff957bfb7f680ff91dd Mon Sep 17 00:00:00 2001
From: Administrator <Dennys.Murillo@escueladerefrigeracion.edu.pe>
Date: Thu, 10 Sep 2026 14:03:41 -0500
Subject: [PATCH] Actualizar frontend/src/pages/Retiros.jsx

---
 frontend/src/pages/Retiros.jsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Retiros.jsx b/frontend/src/pages/Retiros.jsx
index 3445899..e44078f 100644
--- a/frontend/src/pages/Retiros.jsx
+++ b/frontend/src/pages/Retiros.jsx
@@ -56,6 +56,8 @@ export default function Retiros() {
   const [sectorista, setSectorista] = useState("TODOS");
 
   const [filas, setFilas] = useState([]);
+  const [guardado, setGuardado] = useState(false);       // ¿mostrando snapshot guardado?
+  const [guardadoEn, setGuardadoEn] = useState(null);    // fecha del guardado
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
@@ -107,7 +109,7 @@ export default function Retiros() {
     let activo = true;
     setLoading(true); setError(null); setMsgTotal(null);
     api.retiros(ano, mes)
-      .then((r) => { if (activo) { setFilas(r.filas || []); setLoading(false); } })
+      .then((r) => { if (activo) { setFilas(r.filas || []); setGuardado(!!r.guardado); setGuardadoEn(r.guardado_en || null); setLoading(false); } })
       .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
     return () => { activo = false; };
   }, [ano, mes]);
@@ -226,8 +228,16 @@ export default function Retiros() {
       {loading ? <Loader text="Cargando retiros..." /> :
        error ? <ErrorBox msg={error} /> :
        <>
-         <div style={{ fontSize: 13, color: "#1e40af", fontWeight: 600, margin: "10px 0 8px" }}>
-           {filasFiltradas.length} alumno(s) por retirar
+         <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "10px 0 8px", flexWrap: "wrap" }}>
+           <span style={{ fontSize: 13, color: "#1e40af", fontWeight: 600 }}>
+             {filasFiltradas.length} alumno(s) por retirar
+           </span>
+           {guardado && (
+             <span style={{ fontSize: 12, color: "#92400e", background: "#fffbeb",
+                            border: "1px solid #fde68a", borderRadius: 999, padding: "3px 10px", fontWeight: 600 }}>
+               📌 Mostrando datos guardados{guardadoEn ? ` · ${guardadoEn}` : ""}
+             </span>
+           )}
          </div>
          <div className="table-wrap" style={{ overflow: "auto", maxHeight: "65vh" }}>
            <table className="cob-table" {...cols.tableProps}>