From 216309190cf23bb449c00c0db0fb21fd650ba728 Mon Sep 17 00:00:00 2001
From: Ricardo Mancinas <rmancinas@freakma.net>
Date: Sat, 1 Aug 2026 02:43:19 -0700
Subject: [PATCH] feat(recibos): live OCR progress bar on review page

Backend already returns per-status counts via byStatus; render a real
progress bar (X% / N de M / en cola) while PENDING_OCR pages remain,
using the existing progress-track CSS. Falls back to indeterminate
when no docs have been reported yet.
---
 apps/web/src/app/recibos/[id]/page.tsx | 53 ++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/recibos/[id]/page.tsx b/apps/web/src/app/recibos/[id]/page.tsx
index d63d497..8983ef5 100644
--- a/apps/web/src/app/recibos/[id]/page.tsx
+++ b/apps/web/src/app/recibos/[id]/page.tsx
@@ -132,9 +132,7 @@ function BatchReview({ id }: { id: string }) {
       {error && <div className="state-box state-error">{error}</div>}
 
       {processing && (
-        <div className="state-box">
-          Leyendo los recibos… esta pantalla se actualiza sola.
-        </div>
+        <ProcessingBanner docsLength={docs.length} pendingOcr={batch.byStatus.PENDING_OCR ?? 0} />
       )}
 
       <SummaryCard batch={batch} readyCount={readyCount} />
@@ -170,6 +168,55 @@ const STATUS_LABEL_BATCH: Record<string, string> = {
   FAILED: "Falló",
 };
 
+/**
+ * Live readout while OCR is running. The backend tells us how many pages are
+ * still PENDING_OCR, so we can show real progress instead of "loading…". When
+ * the docs list hasn't caught up to the upload yet (total === 0) we fall back
+ * to the indeterminate bar.
+ */
+function ProcessingBanner({
+  docsLength,
+  pendingOcr,
+}: {
+  docsLength: number;
+  pendingOcr: number;
+}) {
+  const done = Math.max(docsLength - pendingOcr, 0);
+  const pct =
+    docsLength > 0 ? Math.min(100, Math.round((done / docsLength) * 100)) : null;
+  return (
+    <div className="card" style={{ padding: 16 }}>
+      <div className="upload-progress" style={{ padding: 0 }}>
+        <div
+          className={`progress-track${pct === null ? " progress-indeterminate" : ""}`}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={pct ?? undefined}
+        >
+          <div className="progress-fill" style={{ width: `${pct ?? 100}%` }} />
+        </div>
+        <div className="upload-progress-stats">
+          {pct === null ? (
+            <span>Leyendo los recibos…</span>
+          ) : (
+            <>
+              <strong>{pct}%</strong>
+              <span>
+                {done} de {docsLength} página(s) leídas
+              </span>
+              {pendingOcr > 0 && <span>{pendingOcr} en cola</span>}
+            </>
+          )}
+          <span style={{ marginLeft: "auto" }}>
+            Esta pantalla se actualiza sola.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function SummaryCard({
   batch,
   readyCount,