Actualizar frontend/src/pages/Roas.jsx

frontend/src/pages/Roas.jsx

@@ -12,6 +12,7 @@ export default function Roas() {
   const [filtros, setFiltros] = useState({ anos: [2026] });
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [recargando, setRecargando] = useState(false);
   const [error, setError] = useState(null);
   const [expand, setExpand] = useState({});     // sede -> abierto/cerrado
   const [expandP, setExpandP] = useState({});   // "sede|prog" -> abierto/cerrado
@@ -30,11 +31,12 @@ export default function Roas() {
 
   useEffect(() => {
     let activo = true;
-    if (!data) setLoading(true);
+    if (!data) setLoading(true); else setRecargando(true);
     setError(null);
     api.roas(ano, mes, "TODOS")
-      .then((res) => { if (activo) { setData(res); setLoading(false); } })
+      .then((res) => { if (activo) { setData(res); } })
-      .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+      .catch((e) => { if (activo) setError(e.message); })
+      .finally(() => { if (activo) { setLoading(false); setRecargando(false); } });
     return () => { activo = false; };
   }, [ano, mes, reload]);
 
@@ -57,7 +59,9 @@ export default function Roas() {
       {loading ? <Loader text="Cargando ROAS..." /> :
        error ? <ErrorBox msg={error} /> :
        !data ? <ErrorBox msg="Sin datos" /> :
-       <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+       <div className="card" style={{ padding: 0, overflow: "hidden",
+              opacity: recargando ? 0.45 : 1, pointerEvents: recargando ? "none" : "auto",
+              transition: "opacity 0.25s ease" }}>
          <div className="card-title" style={{ padding: "14px 16px 6px" }}>Inversión por Sede</div>
          <div className="table-wrap" style={{ border: "none", maxHeight: 460, overflow: "auto" }}>
            <table>
@@ -66,6 +70,8 @@ export default function Roas() {
                  <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 160 }}>Sede</th>
                  <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Importe Gastado</th>
                  <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Resultados</th>
+                 <th style={{ position: "sticky", top: 0, zIndex: 2 }}>L. Recibidos del Mes</th>
+                 <th style={{ position: "sticky", top: 0, zIndex: 2 }}>L. Procesados del Mes</th>
                </tr>
              </thead>
              <tbody>
@@ -87,6 +93,8 @@ export default function Roas() {
                        </td>
                        <td style={{ fontWeight: 600 }}>{soles(f.importe)}</td>
                        <td>{num(f.resultados)}</td>
+                       <td style={{ fontWeight: 600 }}>{num(f.rec || 0)}</td>
+                       <td style={{ fontWeight: 600 }}>{num(f.proc || 0)}</td>
                      </tr>
                      {abierto && subs.map((p) => {
                        const claveP = f.sede + "|" + p.programa;
@@ -107,6 +115,8 @@ export default function Roas() {
                              </td>
                              <td style={{ color: "#475569" }}>{soles(p.importe)}</td>
                              <td style={{ color: "#475569" }}>{num(p.resultados)}</td>
+                             <td style={{ color: "#475569" }}>{num(p.rec || 0)}</td>
+                             <td style={{ color: "#475569" }}>{num(p.proc || 0)}</td>
                            </tr>
                            {abiertoP && conjs.map((c) => (
                              <tr key={claveP + "-" + c.conjunto} style={{ background: "#eef2f7" }}>
@@ -114,6 +124,8 @@ export default function Roas() {
                                           whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 280 }}>{c.conjunto}</td>
                                <td style={{ color: "#94a3b8", fontSize: 12.5 }}>{soles(c.importe)}</td>
                                <td style={{ color: "#94a3b8", fontSize: 12.5 }}>{num(c.resultados)}</td>
+                               <td style={{ color: "#94a3b8", fontSize: 12.5 }}>{num(c.rec || 0)}</td>
+                               <td style={{ color: "#94a3b8", fontSize: 12.5 }}>{num(c.proc || 0)}</td>
                              </tr>
                            ))}
                          </Fragment>
@@ -127,6 +139,8 @@ export default function Roas() {
                    <td className="col-name">Total</td>
                    <td>{soles(data.total.importe)}</td>
                    <td>{num(data.total.resultados)}</td>
+                   <td>{num(data.total.rec || 0)}</td>
+                   <td>{num(data.total.proc || 0)}</td>
                  </tr>
                )}
              </tbody>